我映射了一个数组,并为每个项目显示一个带有文本的按钮。假设我想在点击按钮时,下面的文本颜色会变成红色。如何定位按钮的同级?我尝试使用ref,但因为它是一个映射的jsx,所以只会声明最后一个ref元素。
下面是我的代码:
class Exams extends React.Component {
constructor(props) {
super()
this.accordionContent = null;
}
state = {
examsNames: null, // fetched from a server
}
accordionToggle = () => {
this.accordionContent.style.color = 'red'
}
render() {
return (
<div className="container">
{this.state.examsNames && this.state.examsNames.map((inst, key) => (
<React.Fragment key={key}>
<button onClick={this.accordionToggle} className="inst-link"></button>
<div ref={accordionContent => this.accordionContent = accordionContent} className="accordionContent">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, neque.</p>
</div>
</React.Fragment>
))}
</div>
)
}
}
export default Exams;
正如所解释的,结果是在每次单击按钮时,附加到最后一个按钮的段落将成为目标。
提前感谢
发布于 2019-01-23 03:18:25
将this.accordionContent
初始化为数组
constructor(props) {
super()
this.accordionContent =[];
}
并像这样设置ref
<div ref={accordionContent => this.accordionContent[key] = accordionContent} className="accordionContent">
发布于 2019-01-23 03:36:28
通过使用map的key属性,我找到了一种不使用ref的方法:
accordionToggle = (key) => {
console.log(key)
var a = document.getElementsByClassName('accordionContent')
a[key].style.color = 'red'
}
我不确定像这样访问dom,而不是使用refs直接定位元素是否也一样好。
发布于 2021-11-26 15:26:20
在下面的示例中,我使用了一个refs
数组,该数组使用useRef
初始化,用于跨重新渲染的持久性,然后在第一次渲染<Wrapper>
时填充,从那时起,使用React.createRef()
在map
中创建的所有re都将被缓存在refs
中,并准备好在<Wrapper>
重新渲染时使用。
( refs
数组的)每个动态ref
都被指定为每个子节点的属性:
const Wrapper = ({children}) => {
const refs = React.useRef([]);
// as the refs are assigned with `ref`, set each with a color "red"
React.useEffect(() => {
refs.current.map(ref => {
// no support here for optional chaining: ref?.current?.style.color
if(ref.current) ref.current.style.color = 'red'
})
}, [refs]);
// iterate the children and create a ref inide the "refs" array,
// if one was not already added for this child's index.
// use "cloneElement" to pass that ref to the children
const withProps = React.Children.map(children, (child, i) => {
// no support here for ?? instead of ||
refs.current[i] = refs.current[i] || React.createRef();
return React.cloneElement(child, {ref: refs.current[i] })
});
// no support for <> instead of useless `div` wrapper
return <div>{withProps}</div>
};
ReactDOM.render(<Wrapper>
<button>1</button>
<button>2</button>
<button>3</button>
</Wrapper>, document.body)
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
https://stackoverflow.com/questions/54314945
复制相似问题