Question

export default React.createClass({

displayName: 'Test',

  onItemClick(item) {
    console.log(item);
  },

render() {
  return <div onClick={() => this.onItemClick('apple')}>Fruit</div>
});

点击div后，我得到Uncaught TypeError: Cannot read property 'onItemClick' of undefined。尝试也使用bind，但结果相同。

稍后编辑：

实际代码不同。我用items个对象填充circle对象中的div数组。在循环之外，如果我调用onItemClick()函数它工作正常，但在循环内我得到上面的错误。

export default React.createClass({

displayName: 'Test',

onItemClick (item) {
    console.log(item);
  },

render() {
    var circle = { 
        'one':   { items: [] }, 
        'two':   { items: [] }, 
        'three': { items: [] }, 
        'four':  { items: [] } 
    };

    ['one', 'two', 'three', 'four'].forEach(function (k, i) {
      for (var j = 1; j <= 10; j++) {
        var itemNo = (i * 10 + j);
        circle[k].items.push(<div className={"item item-"+itemNo} onClick={() => this.onItemClick(itemNo)}>{itemNo}</div>);
      }
    });
return (
    <div>{circle.one.items}</div>
)};

我该如何解决这个问题？

Answer 1

return <div onClick={this.onItemClick.bind(this, 'apple')}>Fruit</div>

将onItemClick绑定到组件并使用'apple'

填充第一个参数

Answer 2

forEach处理程序是标准函数，具有不同的this。用箭头功能替换它你应该没问题。

render() {
  var circle = { 
    'one':   { items: [] }, 
    'two':   { items: [] }, 
    'three': { items: [] }, 
    'four':  { items: [] } 
  };
  ['one', 'two', 'three', 'four'].forEach((k, i) => {
//                                         ^^^^^^^^^^
    for (var j = 1; j <= 10; j++) {
      var itemNo = (i * 10 + j);
      circle[k].items.push(<div className={"item item-"+itemNo} onClick={() => this.onItemClick(itemNo)}>{itemNo}</div>);
    }
  });
  return (
    <div>{circle.one.items}</div>
  )};
}

Answer 3

在forEach处理程序中，this会失去其范围。

let _this = this;

所以我在循环上面声明_this并在里面使用它。

render() {
  var circle = { 
    'one':   { items: [] }, 
    'two':   { items: [] }, 
    'three': { items: [] }, 
    'four':  { items: [] } 
  };
  var _this = this;
  ['one', 'two', 'three', 'four'].forEach(function (k, i) {
    for (var j = 1; j <= 10; j++) {
      var itemNo = (i * 10 + j);
      circle[k].items.push(<div className={"item item-"+itemNo} onClick={() => _this.onItemClick(itemNo)}>{itemNo}</div>);
  }
                                          });
  return (
    <div>{circle.one.items}</div>
  )
}

反击onClick`his` binding

3 个答案: