Question

我试图立即在渲染功能中打印输入值。但现在我正在查看此链接：https://facebook.github.io/react/docs/state-and-lifecycle.html

这里他们使用带有super（props）的构造函数而不是设置状态。

但是当我尝试这个时：

 class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {text: ''};
  };

  handleChange(event) {
    this.setState({ text: event.target.value });
  };

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.text}.</h2>

        <input type="text" onKeyUp={this.handleChange} />
      </div>
    );
  }
}

它抛出了这个错误： Uncaught TypeError: Cannot read property 'state' of undefined

我该如何解决这个问题。

Answer 1

当你调用这样的函数时，它会被窗口调用，而不是被你的反应对象调用。

要使函数绑定到您的react对象（并且能够使用setState方法，您需要使用它：

onKeyUp={this.handleChange.bind(this)}

this会将它绑定到您的反应对象：）

Answer 2

this.handleChange = this.handleChange.bind(this); 您可以在构造函数中像这样绑定它，并且它必须起作用，因为您必须将其绑定到react函数。

Answer 3

您必须将this绑定到您的事件处理程序，如下所示：

<input type="text" onKeyUp={this.handleChange.bind(this)} />

工作示例：https://codepen.io/shanedaugherty/pen/ALwAzL

Answer 4

您将值用作属性。

value={this.state.text}

OR

ReactJs输入字段的打印值

4 个答案: