onClick事件在放入ReactJS中的forEach循环时未传递函数

Question

我需要根据复选框中的事件显示一些HTML.父节点上的onClick事件在放入forEach循环时没有传递函数(这是我的小提琴).关于它的奇怪之处在于,当我将它传递给单个元素时它会传递一个函数.

var App = React.createClass({
  getInitialState: function() {
    return {toggle: false}
  },
  handleClick : function(event){
    this.setState({toggle : !this.state.toggle});
  },
  render: function(){
    var checkboxes = [];
    this.props.data.forEach(
      function(name)
      {
        checkboxes.push(<CheckBox onClick={this.handleClick} name={name} />);
                        });
        var textBox = this.state.toggle ? <InputBox name="Bar" /> : null;
        return (
          <div>
          <CheckBox name="Foo" onClick={this.handleClick} />
          {checkboxes}
          {textBox}
          </div>
        );
      }
});

有谁知道为什么会这样？这是一个错误还是我做错了什么？

Answer 1

在this中this.handleClick 不再是指阵营组件对象,因为它传递到的forEach匿名函数里面.一般来说,你可以使用bind一个this与其上下文相关的函数,就像这样

this.props.data.forEach(
  function(name) { ... }.bind(this));

使用forEach,您也可以将其作为第二个参数传递.

this.props.data.forEach(
  function(name) { ... }, this);