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

Question

我还在学习ReactJS。我正在挑战自己写一个非常基本的待办事项应用程序（就像一个人一样），我有一个问题，调用onhtml函数。

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函数的返回调用中

要从map函数内部访问handleClick，我需要做什么？

Answer 1

您应该将this显式绑定到handleClick函数，以引用React组件而不是map函数，因此您可以按如下方式重构代码：

var items = list.map(renderListItem.bind(this));

并在React类中添加renderListItem方法，如下所示：

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

Answer 2

您遇到的问题是，对list.map的调用将使用与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>
    )
}

Answer 3

map函数的第二个参数是一个值，用于在执行回调时定义此的范围。.map（回调（当前值、索引、数组）、此/范围的值\u到\u运行\u）

因此，您可以按如下方式修改map函数：

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

您还可以使用一个箭头函数，其中this被隐式绑定：

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