在React Js中的数组索引上添加自定义onClick事件监听器

Question

我有一个全局定义的数组，试图将自定义事件侦听器添加到数组中存在的每个元素

var item = ["A", "B", "C", "D"]
export default class Test extends React.Component{
   componentWillMount() {
      for (var i = 0; i < item.length; i++) {
         item[i].addEventListener("click",this.bindClick.bind(this,i));
      }
   }

    bindClick(i){
        console.log("check", i)
    }
}

我已经尝试了上面的代码，但出现此错误

Uncaught TypeError: item[i].addEventListener is not a function

请帮助我，在此先感谢；

Answer 1

您不能向项目添加偶数侦听器，因为它们是字符串类型=>，它们没有'addEventListener'方法。 但是您可以使用React元素包装数组元素，可以轻松地将事件侦听器绑定到：

const arrayItems = [<div key=“0” onClick={this.bindClick}>A</div>];

因此您的组件将如下所示：

export default class Test extends React.Component {
    constructor() {
        super(props);

        this.bindClick = this.bindClick.bind(this);
    }

    bindClick() {
        console.log(“hello!”)
    }

    render() {

        const arrayItems = [
            <div key=“0” onClick={this.bindClick}>A</div> ,
            <div key=“1” onClick={this.bindClick}>B</div>
        ];

        return arrayItems;
    }
}