reactjs 事件处理程序错过了这个

Question

当我更改输入值时，事件处理程序 onChangeEvt 将丢失 'this'...

如何在事件处理程序中获取 helloworldComponent 实例？

<!--lang:javascript-->

import * as React from 'react';
import * as ReactDom from 'react-dom';

class HelloWorld extends React.Component{
    onChangeEvt(e){
        console.log(JSON.stringify(this))             //undefined
    }
    render(){
        return(
            <div>
                <input onChange={this.onChangeEvt}/>
            </div>  
        )
    }  
}  
ReactDom.render(
    <HelloWorld/>,
    document.getElementById('app')
)

Answer 1

您需要绑定this 变量。有三种方法可以做到这一点：

1) 使用箭头函数。它们隐式绑定到外部 this 变量。 （我的偏好。）

<input onChange={(event) => this.onChangeEvt(event)} />

2) 显式使用function#bind:

<input onChange={this.onChangeEvt.bind(this)} />

3) 在构造函数中绑定你的方法：

constructor(...args) {
    super(...args);
    this.onChangeEvt = this.onChangeEvt.bind(this);
}