React map生成元素添加点击事件绑定this

问题

使用.map(function(Item)生成元素添加onClick事件：onClick={this.provinceChange.bind(this,"99")}时，前台访问报错：Uncaught TypeError: Cannot read property 'provinceChange' of undefined。
provinceChange是在class中定义的方法：

provinceChange: function(selectedProvince){
  this.setState({
    province : selectedProvince
  });
},

解决

原调用provinceChange方法代码如下：

render: function() {
  let waveProvinceArr = this.state.waveProvinceList;
  return (
    <div>
      <div>
        {
          waveProvinceArr.map(function(waveProvinceItem){
            return <button type="button" onClick={this.provinceChange.bind(this,waveProvinceItem)}>{waveProvinceItem}</button>
          })
        }
      </div>
    </div>
  );
}

通过分析为this在嵌套函数中，而嵌套函数可以通过闭包捕获父函数的变量，但是这个函数没有继承this，所以导致this指向不明报错undefined。
修改方法有：
1、bind(this)：

{
  waveProvinceArr.map(function(waveProvinceItem){
    return <button type="button" onClick={this.provinceChange.bind(this,waveProvinceItem)}>{waveProvinceItem}</button>
  }.bind(this))
}

2、将this做为参数传入：

{
  waveProvinceArr.map(function(waveProvinceItem){
    return <button type="button" onClick={this.provinceChange.bind(this,waveProvinceItem)}>{waveProvinceItem}</button>
  },this)
}

3、在render中将this捕获为self，使用this时改为使用self：

render: function() {
  let waveProvinceArr = this.state.waveProvinceList;
  let self = this;
  return (
    <div>
      <div>
        {
          waveProvinceArr.map(function(waveProvinceItem){
            return <button type="button" onClick={self.provinceChange.bind(self,waveProvinceItem)}>{waveProvinceItem}</button>
          })
        }
      </div>
    </div>
  );
}

4、将waveProvinceArr.map(function(waveProvinceItem)方法换成在render或者方法中使用push生成：
可以参考：【原】React中,map出来的元素添加事件无法使用

参考文章

JavaScript中的this陷阱的最全收集--没有之一
严格模式详解
MDN中Function.prototype.bind()

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!