如何调用父组件中的函数

Question

这里有一个问题，我在React.js应用程序中有一个FormControl组件，我在其中呈现了几种不同类型的其他组件。例如，在下面的代码中，您可以看到我呈现了一个CheckBoxWithLabel。你会注意到我传递了一个函数

onCheck={this.toggleCheckBox}

因此，在CheckBoxWithLabel组件（代码未显示）中，我可以使用onChange事件（react中复选框的内置事件）调用它

onChange={this.props.onCheck} //this code's in the CheckBoxWithLabel

因此，结果是，当单击复选框时，会调用父组件中的toggleCheckBox函数，但这仅适用于下面显示的第一个CheckBoxWithLabel，其他的（在第二个返回函数中动态创建的）无法选中，因此，不会调用toggleCheckBox函数。

那是为什么呢？

如果我没有尝试调用父组件上的函数，而是让这些组件用CheckBoxWithLabel组件中的函数进行响应，那么它们工作正常。只有在父级中设置函数时，复选框才会停止工作，并且不会调用toggleCheckBox函数。

 toggleCheckBox: function(){
   console.log('toggle');
 }
 render: function(){
        return (  

          <div>
          <CheckboxWithLabel labelOn="On" labelOff="Off" item='blah' onCheck={this.toggleCheckBox} />
          <ul>
            {
            this.props.formElements.map(function(item) {

            return <CheckboxWithLabel labelOn="On" labelOff="Off" item={item} onCheck={this.toggleCheckBox} />

            })
            }               
        </ul>
          </div>
          );
        }

Answer 1

map内部的函数需要绑定，以便它可以使用this的正确实例来检索函数：

render: function(){
  return (  
    <div>
      <CheckboxWithLabel labelOn="On" labelOff="Off" item='blah' onCheck={this.toggleCheckBox} />
      <ul>
      {
        this.props.formElements.map(function(item) {
          return <CheckboxWithLabel labelOn="On" labelOff="Off" item={item} onCheck={this.toggleCheckBox} />
        }.bind(this));
      }               
      </ul>
    </div>
  );
}