ReactJs立即打印值

Question

我是reactjs的新手，正在尝试打印输入字段的更新值。我最初尝试的是这样的：

  var App = React.createClass({
   render() {
    return <div>
      <h1>Hello, {this.props.name}</h1>
      <input type="text" onKeyUp={this.handleChange} />
      <p>{this.handleChange}</p>
    </div>;
  },
  handleChange: function(event) {
    return event.target.value;
  }
});
App = React.createFactory(App);

React.render(
  <App name="World" />, 
  document.getElementById('mount-point'));

但我不明白为什么它不能工作。然后我尝试这样做：CodePen也许有人可以帮助我立即打印<p>元素中输入字段的值

Answer 1

var App = React.createClass({
    getInitialState: function() {
        return {
            text: "",
        };
    },
    handleChange: function(event) {
        this.setState({ text: event.target.value });
    },
    render() {
        return <div>
            <h1>Hello, {this.props.name}</h1>
            <input type="text" onChange={this.handleChange} />
            <p>{this.state.text}</p>
        </div>;
    },
});

您必须将组件的所有状态存储在this.state中。使用this.setState更新状态。当您更新状态时，组件将自动使用新状态重新呈现。

该段落的内容是状态的当前值。通常使用onChange而不是onKeyUp来处理文本输入中的状态更改。当文本输入更改时，handleChange将更新状态。