Esempio di codice per la realizzazione del binding bidirezionale in React

Premessa

React.js è ora molto popolare, non si ha più pudore di dire di essere in grado di fare frontend senza conoscere React.js.

Quindi vediamo ora l'implementazione del binding bidirezionale di React.

L'uso del binding bidirezionale:

Il componente deve utilizzare mixins: riferimento a LinkedStateMixin. Fornisce un metodo linkState.

Il parametro è l'attributo dello stato

Il binding bidirezionale utilizza valueLink={this.linkState(XX)}

Il metodo linkState() restituisce un oggetto che ha un attributo value, che specifica l'attributo dello stato.

C'è anche un metodo di callback requestChange, utilizzato per modificare lo stato. Il parametro è il nuovo valore

Puoi intendere che il metodo di binding onchange. Puoi scrivere un oggetto linkState, value è state.XX, nel requestChange utilizzare setState() per modificare il valore. Implementato con valueLink={obj}.

Puoi intendere che this.linkState() implementa il binding del valore specificato value e il metodo change

L'attributo valueLink ha implementato il binding di linkstate.value al value e il binding del metodo requestChange all'onChange

Puoi creare un this.linkState('XX') value={XX.value} onchange={fn} all'interno del metodo utilizzando Xx.requestChange(e.target.value)

-------------------------

Conclusione:Il metodo linkState() fornisce l'attributo state e il metodo change. valueLink={} per implementare il binding di value e change dell'evento.

Di seguito è riportato il codice di implementazione

/* Binding双向默认表单
   * Assegnare un evento change a ciascun input per modificare lo stato
   * Se un tag ha troppi binding non va bene
   * Quindi React mi ha dato un suggerimento con 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'));

------------------------ReactLink对象传递

可以向子组件传递：

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

子组件内可：

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

通过props来引用并绑定到valueLink上。

也可以用this.props.linkname.requestChange()来用方法修改值。

它们的变化会同步到父组件的，并更新标签的。

总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能有所帮助，如果有疑问大家可以留言交流。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。