Чому ключове слово `this` посилається на Window not Component in метод React onClick () - meteor, reactjs

Я думав, що саме так this Ключове слово завжди посилається на компонент у React, але в моєму toggleStyle метод нижче this повертає віконний об'єкт замість об'єктного компонента React. Хтось може допомогти мені зрозуміти, чому це так?

renderDeviceToggle() {

var arrowAnimation = {
rotateX: this.state.expanded ? 180 : 0,
transformOriginY: [ "42%", "42%" ]
};

let toggleState = function () {
// "this" is the window
console.log("in toggleState: this: ", this)
this.setState({expanded: !this.state.expanded});
};

return (
<div className="device-toggle" onClick={toggleState}>
<div>{console.log("in return: this is the component: ", this)}</div>
<div className="device-icon icon huge"></div>
<VelocityComponent duration={300} animation={arrowAnimation}>
<div className="icon color-blue flex">
<i className="icon-caret-down"></i>Hi
</div>
</VelocityComponent>
</div>
);
},

render() {
return (
<div>
<div className="panel panel-default">
<div className="panel-heading">
<div className="pull-right text-right">
<p><a href="/addOrder" className="pull-right">New order </a></p>
<p><a href="#"> View all</a></p>
</div>
<h4>Top orders</h4>
</div>
<div className="panel-body">
{ this.data.orders ?
this.renderOrderTable() :
<p>Loading</p> }
</div>
<div>
{this.renderDeviceToggle()}
</div>
</div>
</div>
);
}

Відповіді:

Причиною цього є те, що React лише прив’язує функції верхнього рівня у вашому класі до цього. Тож у цьому випадку обидва render і renderDeviceToggle пов'язані, як ви очікували. Однак всередині renderDeviceToggle ви створили нову функцію,toggleState, про який React не знає. Тому цей код працює за звичайними правилами javascript, коли створюється функція.

Як зазначалося в іншій відповіді, для вирішення вам потрібно буде використовувати контекст стрілки або явно прив’язати нову функцію до "this".

Ви можете використовувати функції стрілок, щоб отримати лексичну прив'язку this:

let toggleState = () => {
// "this" should be the component
console.log("in toggleState: this: ", this)
this.setState({expanded: !this.state.expanded});
};

Або явно bind контекст:

let toggleState = function () {
// "this" should be the component
console.log("in toggleState: this: ", this)
this.setState({expanded: !this.state.expanded});
}.bind(this);

Що стосується як і чому this працює в JS тут чудове пояснення https://stackoverflow.com/a/3127440/4879