Question

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

onCheck={this.toggleCheckBox}

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

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>
  );
}

如何在父组件中调用函数

1 个答案: