由于某种原因,这个值在 react 事件处理程序中丢失了。阅读文档,我认为 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 来说是正确的行为。
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>
}
}
关于reactjs - React 事件处理程序中 this 的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29732015/