javascript-ReactJs立即打印值

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

解决方法:

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将更新状态.

上一篇:javascript-在JSX中的嵌套地图函数中使用React JS打印数据


下一篇:jsx简化教程