由于某些原因,此值在反应事件处理程序中丢失。阅读我认为有反应的文档,在这里做了一些工作,以确保将其设置为正确的值
以下内容不符合我的预期
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是正确的行为。
v0.13.0中的autobinding feature does not apply to ES6 classes。
因此,您需要使用:
<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>
}
}