ReactJS映射函数找不到未定义的属性

Question

我还在学习ReactJS。我正在挑战自己编写一个非常基本的待办应用程序（就像一个人一样），并且在调用onClick函数时遇到问题。

var List = React.createClass({

  handleClick: function () {
    alert("Clicked!");
  },

  render: function () {

    var list = this.props.items;
    var items = list.map(function(item){
      return (
        <li style={{borderBottom:'1px solid red'}}>
          <label onClick={this.handleClick}>
            <input type="checkbox" />
            {item}
          </label>
        </li>
      );
    });

    return (
      <ul>{items}</ul>
    )
  }
});

这里的问题是onClick={this.handleClick}无法调用，因为它不在render函数的return调用内。

我需要怎么做才能从map函数内部访问handleClick？

Answer 1

您遇到的问题是，您对的调用list.map将以与this您的render方法不同的方式调用传递的函数。

一个简单的解决方法是获取this外部作用域并将其存储在变量中，然后在内联函数中使用该变量。

render: function () {
    var self = this;
 // ^^^^^^^^^^^^^^^^

    var list = this.props.items;
    var items = list.map(function(item){
      return (
        <li style={{borderBottom:'1px solid red'}}>
          <label onClick={self.handleClick}>
                       // ^^^^
            <input type="checkbox" />
            {item}
          </label>
        </li>
      );
    });

    return (
      <ul>{items}</ul>
    )
}