Question

当我更改输入值时，事件处理程序onChangeEvt将失去＆＃39;这个＆＃39; ...

我如何在事件处理程序中获取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);
}

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

1 个答案: