数据双向绑定

组件内部的state状态发生改变，更新我们视图中元素的状态，视图中元素的状态发生改变也会影响我们组件中state的状态。

input 表单数据双向绑定

 <div id="app"></div>
    <script type="text/babel">
       //state双向数据绑定
        class App extends React.Component{            
            constructor(){
                super();
                //添加state状态
                this.state={
                    name:'小明'
                }
                //事件函数中绑定this
                this.change=this.change.bind(this)
            }
            change(e){
                console.log(e)
                this.setState({
                    name:e.target.value
                })
            }
            render(){
                return <div>
                        <span>{this.state.name}</span>
                        <div>
                            <input type="text" onChange={this.change} value={this.state.name}/>
                         </div>
                    </div>
            }
           
        }
        ReactDOM.render(<App></App>,document.getElementById("app"))
    </script>