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);
    }

为什么React无法找到＆＃34;这个＆＃34;在事件处理程序

2 个答案: