无法读取undefined的属性[function]

Question

我在渲染函数的返回部分中有这个：

<table>
        <tbody>
          {nums.map(function(num, index){
            return <tr key={ index }>{num} <input type="submit" value="unmatch" onClick={this.unMatchButtonClicked} />
            </tr>;
          })}
        </tbody>
      </table>

但是当我加载页面时，我收到一条错误消息：Cannot read property 'unMatchButtonClicked' of undefined

即使它是render:function()

之前的函数

unMatchButtonClicked: function(){
  console.log('called');
},

那么this的范围是什么？为什么它未定义？

Answer 1

1. 选项：Array.map(function () {/*...*/}, this)
2. 选项：var unMatchButtonClicked = this.unMatchButtonClicked和onClick={unMatchButtonClicked}

除此之外，您应该考虑为点击处理程序使用箭头功能，或将this绑定到您的功能。
http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html