如何在ReactJS中使用参数正确调用父组件中的事件处理函数？

Question

我要在子组件中调用的组件中有一个函数。

这是父组件中的功能：

handleFilterGroupsQuery = queryObject => {
    return queryObject;
}

我已将其绑定到构造函数中（在父组件中）：

constructor(props) {
    super(props);
    this.handleFilterGroupsQuery = this.handleFilterGroupsQuery.bind(this);
}

在该组件的render方法中，我将该函数传递给子组件，如下所示：

<FilterGroupsSection 
    handleFilterGroupsQuery={(queryObject) => {this.handleFilterGroupsQuery(queryObject)}} 
/>

在FilterGroupsSection（子组件）组件中，我试图这样调用该函数：

let test = 'test'
console.log(this.props.handleFilterGroupsQuery(test));

这将在控制台中显示“未定义”。我无法弄清楚为什么未正确传递参数值。

感谢任何建议。

Answer 1

您有2个选项。只需删除绑定到您的子组件的函数中的其他{}或使用return即可：

 handleFilterGroupsQuery={(queryObject) => this.handleFilterGroupsQuery(queryObject)}

或

 handleFilterGroupsQuery={(queryObject) => { return this.handleFilterGroupsQuery(queryObject)}}

Answer 2

一个好的解决方案是分别传递参数和函数：

<Parent 
  handleFilterGroupsQuery={this.handleFilterGroupsQuery}
  queryObject={queryObject}
/>

然后，您可以在每次在子组件上调用函数时轻松绑定参数：

this.props.handleFilterGroupsQuery.bind(null, queryObject); 

否则，未命名的内联函数和对象将具有新的引用，并触发下面的组件树的完全重新呈现。