React表单

表单的读取

我们可以用this.prop来读取来获取对象，但是用户在表单填入的内容，属于用户跟组件的互动，不能用 this.props来读取

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
  //通过 event.target.value 读取用户输入的值,不能通过this.props.value 读取
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
      //需要定义一个onChange事件的回调函数
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

ReactDOM.render(<Input/>, document.body);

onchange 事件：当用户改变input输入框内容时执行一段Javascript代码：
event.target: target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。