首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Reactjs如何在map函数内部使用ref?

Reactjs如何在map函数内部使用ref?
EN

Stack Overflow用户
提问于 2019-01-23 03:11:48
回答 3查看 21.1K关注 0票数 20

我映射了一个数组,并为每个项目显示一个带有文本的按钮。假设我想在点击按钮时,下面的文本颜色会变成红色。如何定位按钮的同级?我尝试使用ref,但因为它是一个映射的jsx,所以只会声明最后一个ref元素。

下面是我的代码:

代码语言:javascript
复制
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;

正如所解释的,结果是在每次单击按钮时,附加到最后一个按钮的段落将成为目标。

提前感谢

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54314945

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档