React 表单与事件

一个简单的小例子，可以做到value值改变的同时，显示出的文字同步更改。
在实例中我们设置了输入框 input 值 value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。
对例子感兴趣的可以直接敲一下，对原理感兴趣的直接去看菜鸟教程文档吧。
http://www.runoob.com/react/react-forms-events.html

import React, { Component } from 'react';

class From extends Component {
    constructor(props){
        super(props);
        // 设置初始值
        this.state={value:'你好'}
        // 绑定this
        this.handleChange = this.handleChange.bind(this)
    }
    // 监听事件
    handleChange(event){
        // 获取最新的value值 并改变原值
        this.setState({value:event.target.value});
    }

   render(){
        // 将最新的value值 赋值给value
       let value = this.state.value;
       return(
           <div>
                {/* 绑定监听事件，渲染最新的value */}
               <input type="text" value={value} onChange={this.handleChange}/>
               {/* 显示最新的value */}
               <h4>{value}</h4>
           </div>
       )
   }

}
export default From  ;