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