#React 如何在JSX回调中绑定方法或事件处理程序?
有3种可能的方法可以实现此目的:
在构造函数中进行绑定:在JavaScript类中,默认情况下未绑定方法。同样的事情也适用于定义为类方法的React事件处理程序。通常我们将它们绑定在构造函数中。
class Component extends React.Componenet {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
// ...
}
}
公共类字段语法:如果您不喜欢使用绑定方法,则可以使用公共类字段语法正确地绑定回调。
handleClick = () => { console.log('this is:', this) }
回调函数中的箭头函数:您可以直接在回调函数中使用箭头函数。
<button ```js
onClick={(event) => this.handleClick(event)}>
{'Click me'}
注意:如果将回调作为prop传递给子组件,则这些组件可能会进行额外的重新渲染。在这种情况下,最好是去.bind()或公共类字段语法的方法考虑性能。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。