Reactjs如何在map里面使用ref函数?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (123)

我正在映射数组,并为每个项目显示一个带文本的按钮。假设我想要点击按钮,下面的文字会将其颜色更改为红色。如何定位按钮的兄弟?我尝试使用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;

如上所述,结果是每次按下按钮时,将定位附加到最后一个按钮的段落。

提前致谢

提问于
用户回答回答于

这是我基于上面代码的代码工作示例

链接的示例是“实际”手风琴,即显示和隐藏相邻内容。

(请参阅下面的代码段以获得红色)

https://codepen.io/PapaCodio/pen/XwxmvK?editors=0010

代码链接

初始化referance数组:

constructor(props) {
    super();
    this.accordionContent = [];
}

使用键将ref添加到引用数组:

<div ref={ref => (this.accordionContent[key] = ref)} >

通过onClick将密钥传递给切换功能

 <button onClick={() => this.accordionToggle(key)} >

最后引用切换功能中的键

accordionToggle = key => {
    this.accordionContent[key].style.color = 'red'
};
用户回答回答于

通过使用地图的key属性,我找到了一种不使用ref的方法:

 accordionToggle = (key) => {
        console.log(key)
        var a = document.getElementsByClassName('accordionContent')
        a[key].style.color = 'red'
    }

我不确定是否像这样访问dom一样好,而不是使用refs来直接定位元素。

扫码关注云+社区

领取腾讯云代金券