由于某些原因，这在反应事件处理程序中的值被丢失。阅读文档我认为在这里做了一些反应，以确保这被设置为正确的价值
以下不符合我的预期
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对我来说是新的，但这似乎不是正确的行为？
这是JavaScript和React的正确行为，如果您使用新的类语法。
autobinding feature does not apply to ES6 classes在v0.13.0。
所以你需要使用：
<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>
}
}
