React map生成元素新增點選事件繫結this

莫顯輝發表於2017-10-24
React事件

問題

使用.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()

相關文章