![](/img/trans.png)
[英]How to call handler function from a child of a child component (ReactJS)
[英]How to correctly call an event handler function in a parent component with a parameter in ReactJS?
我有一个要在子组件中调用的组件中的函数。
这是父组件中的功能:
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));
这在控制台中显示“未定义”。 我无法弄清楚为什么未正确传递参数值。
感谢任何建议。
您有2个选择。 只需删除绑定到您的子组件的函数中的其他{}或使用return即可:
handleFilterGroupsQuery={(queryObject) => this.handleFilterGroupsQuery(queryObject)}
要么
handleFilterGroupsQuery={(queryObject) => { return this.handleFilterGroupsQuery(queryObject)}}
一种好的解决方案是分别传递参数和函数:
<Parent
handleFilterGroupsQuery={this.handleFilterGroupsQuery}
queryObject={queryObject}
/>
然后,您可以在每次在子组件上调用函数时轻松绑定参数:
this.props.handleFilterGroupsQuery.bind(null, queryObject);
否则, 未命名的内联函数和对象将具有新的引用,并触发下面的组件树的完全重新呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.