react基础学习三 --- 数据双向绑定

react的双向数据绑定需要自己来实现，不像vue那样可以直接使用v-model指令。

react的表单元素可分约束性和非约束性两种。

非约束性组件

不受到react的约束，value的值有原生DOM管理，value要写成defaultValue。

<input type="text" defaultValue="123"/>

约束性组件

value的值受到react的状态state的管理，通过onchange事件来改变value值。

<input type="text" value={this.state.value} {(event)=>this.handleChange(event)/> 

完整demo

  window.onload = function(){
            class Welcome extends React.Component{
               constructor(props){
                   super(props);
                   this.state = {
                        value:'input',
                        sex:'man',
                        select:""
                   }
               }
               handleChange(e){
                   this.setState({
                       value:e.target.value
                   })
               }
               handleRedio(event){
                   this.setState({
                       sex:event.target.value
                   })
               }
               handleSelect(event){
                this.setState({
                       select:event.target.value
                   })
               }
               submit(){
                   alert(JSON.stringify(this.state))
               }
                render(){
                    let arr = ['aaa','bbb','ccc','ddd']
                    return (
                            <div>
                                <input type="text" defaultValue='123456'/> <br/> 
                                <input type="text" value={this.state.value} onChange={(event)=>this.handleChange(event)}/>
                                <h1>{this.state.value}</h1> 
                                <input type="radio" defaultChecked />  

                                <input type="radio" name="sex" checked={this.state.sex=='man'} value='man' onChange={(event)=>this.handleRedio(event)}/>男
                                <input type="radio" name="sex" checked={this.state.sex=='women'} value='women' onChange={(event)=>this.handleRedio(event)}/> 女
                                {this.state.sex}<br/>
                                 
                                 <select value={this.state.select} onChange={(event)=>this.handleSelect(event)}>
                                    {
                                        arr.map(function (item,index) {
                                            return <option key={index} value={item}>{item}</option>
                                        })
                                    }
                                 </select>
                                    {this.state.select}

                                    <br/>
                                    <button onClick={()=>this.submit()}>提交</button>
                            </div>
                        );
                }
            }
            ReactDOM.render(

                    <Welcome></Welcome>
              ,
                document.getElementById('my')
            )
        }