DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> React實現雙向綁定示例代碼
React實現雙向綁定示例代碼
編輯:關於JavaScript     

前言

React.js現在已經很流行了,不會React.js都不好意思說自己會前端了。

那麼下面就來看看關於React雙向綁定的實現。

雙向綁定的使用:

組件需要mixins:引用LinkedStateMixin。它提供一個linkState方法。

參數是state屬性

雙向綁定用valueLink={this.linkState(XX)}

linkState方法返回一個對象,有一個value屬性,指定state的屬性。

還有一個requestChange回調方法,用來實現state的修改。參數是新值

可以理解成onchange的綁定方法。可以自己寫一個linkState對象,value是state.XX requestChange裡用setState()來修改值。用valueLink={obj}來實現。

可以理解成this.linkState()實現的就是指定綁定值value 和change方法

valueLink屬性實現了linkstate.value綁定到value requestChange方法綁定onChange

可以創建一個this.linkState('XX') value={XX.value} onchange={fn}方法內使用Xx.requestChange(e.target.value)

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

小結:linkState()方法提供state屬性和change方法。valueLink={}來實現value 和change事件的綁定。

以下是實現代碼

/*默認表單雙向綁定
   * 給每個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'));

------------------------ReactLink對象傳遞

可以向子組件傳遞:

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

子組件內可:

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

通過props來引用並綁定到valueLink上。

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

它們的變化 會同步到父組件的。並更新標簽的。

總結

以上就是這篇文章的全部內容,希望本文的內容對大家的學習或者工作能有所幫助,如果有疑問大家可以留言交流。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved