React篇(028)-如何在 JSX 回调中绑定方法或事件处理程序?
React篇(028)-如何在 JSX 回调中绑定方法或事件处理程序?
齐丶先丶森
发布于 2022-05-12 20:48:31
发布于 2022-05-12 20:48:31
实现这一点有三种可能的方法： 1. **Binding in Constructor:** 在 JavaScript 类中，方法默认不被绑定。这也适用于定义为类方法的 React 事件处理程序。通常我们在构造函数中绑定它们。
class Component extends React.Componenet {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
// ...
}
}2. **Public class fields syntax:** 如果你不喜欢 bind 方案，则可以使用 *public class fields syntax* 正确绑定回调。
handleClick = () => {
console.log('this is:', this)
} <button onClick={this.handleClick}>
{'Click me'}
</button>3. **Arrow functions in callbacks:** 你可以在回调函数中直接使用 *arrow functions*。
<button onClick={(event) => this.handleClick(event)}>
{'Click me'}
</button>**注意：** 如果回调函数作为属性传给子组件，那么这些组件可能触发一个额外的重新渲染。在这些情况下，考虑到性能，最好使用 `.bind()` 或 *public class fields syntax* 方案。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-08-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读