ReactJs 立即打印值答案

【问题标题】：ReactJs Print value instantlyReactJs 立即打印值
【发布时间】：2016-10-04 09:54:13
【问题描述】：

我是 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> 元素中输入字段的值

【问题讨论】：

您需要将更改的值存储到您的handleChange 中的状态（例如this.setState({ myInputValue: event.target.value });）中。然后您可以像这样“打印”p 中的值：<p>{this.state.myInputValue}</p>。
强烈建议您阅读文档和教程。 facebook.github.io/react/docs/thinking-in-react.html 否则你只是在猜测 API。
还有相关文档：facebook.github.io/react/docs/forms.html
@ctrlplusb 是的，我正在研究这个，但我认为也许有办法在 handleChange 事件中获得价值

标签： javascript reactjs jsx

【解决方案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 将在文本输入发生变化时更新状态。

【讨论】：