为什么 React 在事件处理程序中找不到“this”[重复]

Question

全部：

我对 React 很陌生，当我尝试制作一个非常简单的组件时，例如带有标签的输入框，标签可以根据输入框的输入而改变。

class App extends React.Component {
    constructor() {
        super();
        this.name = "World";
    }
    changeName(e){
        var nameinput = this.refs.nameinput;
        this.name = nameinput.value;
    }
    render(){
        return  (
            <div>
                <input ref="nameinput" onChange={this.changeName} />
                Hello, {this.name}!
            </div>
            );
    }
}

目前问题出在 changeName() 函数中，没有对 App 的引用（当我打印出 this 时，它是未定义的）我想知道如何使用 refs 之类的东西获得对该输入框的引用.nameinput.value

谢谢

Answer 1

你需要绑定你的事件处理器：

<input ref="nameinput" onChange={this.changeName.bind(this)}/>

有关this的更多详细信息，请参阅此问题：

How to access the correct `this` context inside a callback?

Answer 2

或者你可以在你的构造函数中绑定它

constructor() {
        super();
        this.name = "World";
        this.changeName = this.changeName.bind(this);
    }