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出来的元素添加事件无法使用


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值