onClick 이벤트가 ReactJS의 forEach 루프에 배치되었을 때 함수를 전달하지 않습니다.

Question

체크 상자의 이벤트를 기반으로 일부 HTML을 표시해야합니다. 부모 노드의 내 onClick 이벤트가 forEach 루프에 배치 될 때 함수를 전달하지 않습니다. (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

this.handleClickno longer refers to the React component object의 this은 forEach에 익명 함수가 전달되어 있기 때문입니다. 일반적으로이 함수의 this 문맥의 그것의 Foreach은이

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

등이 bind 수 있습니다, 당신은 또한 단지 두 번째 인수로 전달할 수 있습니다.

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