由于某种原因,这个值在react事件处理程序中丢失了。 阅读文档,我认为反应做了一些事情,以确保这被设置为正确的值
以下不符合我的预期
import React from 'react';
export default class Observer extends React.Component {
handleClick() {
console.log(this); //logs undefined
}
render() {
return (
<button onClick={this.handleClick}>Click</button>
);
}
}
但这样做:
import React from 'react';
export default class Observer extends React.Component {
handleClick() {
console.log(this); //logs Observer class instance
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>Click</button>
);
}
}
React和ES6对我来说是新手,但这似乎不是正确的行为?
如果您使用新的class
语法,这是JavaScript和React的正确行为。
所以你需要使用:
<button onClick={this.handleClick.bind(this)}>Click</button>
或者其他一个技巧:
export default class Observer extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
/* ... */
}
render() {
return <button onClick={this.handleClick}>Click</button>
}
}
接受的答案是好的,我在ES6中使用了很多,但我只想添加另一个与ES7相关的“更现代”的解决方案(在React组件类自动绑定说明中提到 ):使用箭头函数作为类属性 ,然后您不需要在任何地方绑定或包装您的处理程序。
export default class Observer extends React.Component {
handleClick = (e) => {
/* ... */
}
render() {
return <button onClick={this.handleClick}>Click</button>
}
}
这是最简单,最干净的解决方案!
像其他人所说的那样,当使用ES6类时,React不会将方法自动绑定到实例。 也就是说,我会习惯在事件处理程序中始终使用箭头函数,例如: onClick={e => this.handleClick()}
而不是: onClick={this.handleClick.bind(this)}
这是因为这意味着您可以在测试中使用间谍替换handleClick方法,这是使用bind时无法执行的操作。