this.pops在React Component中的箭头函数中显示为未定义

Question

我正在使用一个箭头函数将this绑定到React组件中。请参阅下面的handleChange()函数。当我在箭头函数中放置一个断点时，我发现一些非常奇怪的东西：定义了this，但this.props是undefined。尽管如此，this.props.onChange()还是被正确调用了！！！这种奇怪的行为有什么解释吗？

class MyComponent extends React.Component {
render() {
const { someProp } = this.props;
// <TextField> is an input component from Material UI library
return (
<TextField
onChange={this.handleChange}
/>
);
}
handleChange = event => {
const value = event.target.value;
this.props.onChange(value);
};
}

p.S.另一方面，render()方法表现正常——定义了this.props。

更新

这是由巴别塔产生的转译代码：

_this.handleChange = function(event) {
var value = event.target.value;
_this.props.onChange(value);
}

Answer 1

很可能你被babel欺骗了。

由于您使用的是babel预设<2017年，运输编码为：

class A {
method = () => {
this.prop.a();
};
}

看起来像：

var A = function A() {
var _this = this;
this.method = function () {
_this.prop.a();
};
};

查看上面的代码，method中的_this和this似乎都指向类实例(因为作为对象的方法调用的函数中的this绑定到该对象)。

然而，在JS中，this是一个动态属性，因此我们不能仅通过读取代码以可预测的方式静态地确定其值；我们必须运行它。

这意味着handleChange中的this不一定与您期望的this相同。这取决于handleChange的调用方式。然而，无论我们如何称呼handleChange，_this都不会受到影响(因此Babel这样做的原因之一)

在您的特定代码中，您将handleChange传递给TextField的onChange事件处理程序，该事件处理程序将覆盖this，使其默认为undefined。

React事件处理程序将上下文重写为undefined(通过将处理程序作为普通函数调用)：

ReactDOM.render(
<input onChange={logThis} placeholder="Start typing" />,
document.querySelector('#example')
)
function logThis() {
console.log(this);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>

这意味着在handleChange中，this被TextField设置为的任何值所绑定，而_this仍然指向MyComponent的实例。

因此，一切仍然有效(因为_this是正确的)，但this很可能是undefined。