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

我还在学习。我正在挑战自己编写一个非常基本的todo应用程序（正如人们所做的那样），我在调用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>
    )
  }
});

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>
    )
}

var List=React.createClass({
handleClick:函数（）{
警报（“单击！”）；
},
渲染：函数（）{
var list=this.props.items；
var items=list.map（函数（项）{
返回(

{item}

);
});
返回(
{items}
)
}
});

---

这里的问题是不能调用

onClick={this.handleClick}

，因为它不在render函数的返回调用中

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

您应该将

此

显式绑定到

handleClick

函数以引用React组件而不是map函数，这样您就可以按如下方式重构代码：

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

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

并在React类中添加

renderListItem

方法，如下所示：

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

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

renderListItem（项目）{
返回(

{item}

);
}

函数的第二个参数是定义 执行回调时此的范围。

（回调（currentValue，index，array），此/范围的值\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);

---

您遇到的问题是，对

list.map

的调用将使用与

render

方法不同的

this

调用传递的函数

一个简单的解决方法是在外部作用域中获取

这个

，并将其存储在变量中，然后在内联函数中使用该变量

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>
    )
  }
});

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>
    )
}

render:function（）{
var self=这个；
// ^^^^^^^^^^^^^^^^
var list=this.props.items；
var items=list.map（函数（项）{
返回(

// ^^^^
{item}

);
});
返回(
{items}
)
}

可能的重复解决了问题，但现在页面加载时也会触发单击（因此在页面加载时会连续收到3个警报，每个列表项一个），这很奇怪。通过使用括号（onClick={this.handleClick（）}）定义handleClick，在onClick上设置它时，您没有调用handleClick，是吗？这是一个很好的技巧。感觉有点太简单了-这有什么缺点吗？@MattSaunders这是ES2015之前代码中非常常见的模式。它基本上与ES2015 arrow函数的功能相同，您只需手动操作即可。还有其他选项（重新绑定、将

此

传递到

映射

等），但这种方式的性能类似，至少可读性相同。