ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
实现这一点有三种可能的方法: 1. **Binding in Constructor:**在 JavaScript 类中,方法默认不被绑定。这也适用于定义为类方法的 React 事件处理程序。通常我们在构造函数中绑定它们。 ~~~js 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*正确绑定回调。 ~~~js handleClick = () => { console.log('this is:', this) } ~~~ ~~~js <button onClick={this.handleClick}> {'Click me'} </button> ~~~ 3. **Arrow functions in callbacks:**你可以在回调函数中直接使用*arrow functions*。 ~~~js <button onClick={(event) => this.handleClick(event)}> {'Click me'} </button> ~~~ **注意:**如果回调函数作为属性传给子组件,那么这些组件可能触发一个额外的重新渲染。在这些情况下,考虑到性能,最好使用`.bind()`或*public class fields syntax*方案。