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立即打印价值

1 个答案: