该map函数的第二个参数是一个值，用于定义this执行回调时的范围。:

.map ( callback( currentValue, index, array) , value_for_this/scope_to_run_in )

所以你可以修改你的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>
  );
});

您遇到的问题是您的调用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>
    )
}

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

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

并renderListItem在你的 React 类中添加方法如下：

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