React实现双向绑定示例代码

/*默认表单双向绑定   * 给每个input绑定change事件来实现修改state   * 如果标签多了一个个绑定肯定是不行的，   * 所以react 给我个提示了reactLink来   */   var Box1=React.createClass({   getInitialState:function(){    return {    name:'star',bool:true    }   },   handlNameChange:function(event){    this.setState({name:event.target.value});   },handlboolChange:function(event){    this.setState({bool:event.target.checked})   },   render:function(){    return (    <div>     <input type="text" value={this.state.name} onChange={this.handlNameChange}/>   <br/>     <input type="checkbox" checked={this.state.bool} onChange={this.handlboolChange} />    </div>     )   }   }) ;   React.render(<Box1></Box1>,document.querySelector('#div1'));      /*ReactLink仅是提供了onchange setState模式的简单包装和约定。是其的简写方式   * 1、需要mixins添加引用   * 2、原先的value绑定换成valueLink。参数从this.state.XX换成this.linkState('XX')这样就可以了   */   /*ReactLink解析   * LinkedStateMixin给组件添加一个linkState方法，参数是state属性名。   * 它返回一个reactlink对象，包含state当前值和一个改变值 的回调.   * reactlink 可以在组件间通过props传递   */   var Box2=React.createClass({   mixins:[React.addons.LinkedStateMixin],//添加引用   getInitialState:function(){    return {    name:'star',bool:true    }   },   render:function(){//绑定时属性从value换成valueLink值需要用this.linkState方法调用    return (    <div>     <input type="text" valueLink={this.linkState('name')} />   <br/>     <input type="checkbox" checkedLink={this.linkState('bool')} />    </div>       );   }   })   React.render(<Box2></Box2>,document.querySelector('#div2'));      /*底层原理   * reactlink对象其实就一个value属性，和一个requestChange方法，value值 是state。方法实现修改state值   *    */   var Box3=React.createClass({   getInitialState:function(){    return {    name:'star',bool:true    }   },   handlnamechange:function(val){    this.setState({name:val})   },   handlboolchange:function(val){    this.setState({bool:val})   },   render:function(){    var reactlink={    value:this.state.name,    requestChange:this.handlnamechange    }    var reactlink2={    value:this.state.bool,    requestChange:this.handlboolchange    }     return(      <div>     <input type="text" valueLink={reactlink} />   <br/>     <input type="checkbox" checkedLink={reactlink2} />    </div>      )   }   });   React.render(<Box3></Box3>,document.querySelector('#div3'));      /*valuelink   * 它实际上实现的是状态的绑定和change事件的修改   * requestChange方法接收值来实现state的修改   */   var Box4=React.createClass({   mixins:[React.addons.LinkedStateMixin],//添加引用   getInitialState:function(){    return {    name:'star',bool:true    }   },   render:function(){    var valuelink=this.linkState('name');    var handlenamechange=function(e){      valuelink.requestChange(e.target.value)     }    var valuelink2=this.linkState('bool');    var handlenboolchange=function(e){      valuelink2.requestChange(e.target.checked)     }        return (      <div>     <input type="text" value={valuelink.value} onChange={handlenamechange} />   <br/>     <input type="checkbox" checked={valuelink2.value} onChange={handlenboolchange} />    </div>     )   }   });   React.render(<Box4></Box4>,document.querySelector('#div4'));

linkname={this.linkState('name')}

<input type="text" valueLink={this.props.linkname} >