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 将在文本输入更改时更新状态。

ReactJs 立即打印值

ReactJs Print value instantly

javascript

jsx

reactjs