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

Question

我需要根据复选框中的事件显示一些HTML。 当放置在forEach循环中时，父节点上的onClick事件不会传递函数(here's my fiddle)。关于它的奇怪之处是，当我将它传递给单个元素时它会传递一个函数。

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

thisthis.handleClickno longer refers to the React component object，因为它在传递给forEach的匿名函数中。一般来说，你可以bind函数的this到它的上下文中，类似这样的

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

用foreach，你也可以将它作为第二个参数。

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