如何在父组件中调用函数

Question

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

onCheck={this.toggleCheckBox}

以便在 CheckBoxWithLabel 组件（代码未显示）中我可以使用 onChange 事件（反应中复选框的内置事件）调用它

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

所以结果是当复选框被点击时，父组件中的 toggleCheckBox 函数被调用，但这只对下面显示的第一个 CheckBoxWithLabel 起作用，其他的（在第二个 return 函数中动态创建）无法检查，因此不会调用 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>
  );
}

如何在父组件中调用函数

how to call function in parent component

reactjs