React的雙向繫結

標籤：

以前對於雙向繫結概念來自於Angular.js，現在我用我感興趣的react.js來實現這樣的方式。有2種方式分析，1：不用外掛程式，2：用外掛程式

（引入react.js操作省略。。。）

不用外掛程式：

    先建立react組件

 

var NoLink = React.createClass({});React.render(<NoLink />,document.body);

 

組件建立好了，需要一個初始設定變數，來公用顯示輸入的資料

var NoLink = React.createClass({ getInitialState:function(){        return {message:‘‘}    }});React.render(<NoLink />,document.body);

message初始值為空白，這是正常項目環境可以這樣設定。下面我想用一個input輸入框 和一個b標籤實現雙向繫結的效果，render所需要的html標籤

var NoLink = React.createClass({    getInitialState:function(){        return {message:‘‘}    }, render:function(){        var mess = this.state.message;        return (            <div>                <input type="text" onChange={this.handelChange} value={mess} />                <b>{mess}</b>            </div>        )    }});React.render(<NoLink />,document.body);

在上面代碼中 可以清晰的 看出返回的組件元素，其中在input輸入框中加了一個onChange操作，這個處理當我們輸入內容的時候，怎麼讓輸入的內容同時展示在b標籤中；在react操作中其實很簡單。

var NoLink = React.createClass({    getInitialState:function(){        return {message:‘‘}    },    handelChange:function(event){        console.log(event.target);        this.setState({message:event.target.value})    },    render:function(){        var mess = this.state.message;        return (            <div>                <input type="text" onChange={this.handelChange} value={mess} />                <b>{mess}</b>            </div>        )    }});React.render(<NoLink />,document.body);

onChange直接調用handelChange函數，在這隻要處理對初始設定變數message的重新賦值就可以了，在react中擷取初始值 直接用“this.state.初始值",如果想設定初始值直接用"this.setState({初始值：新值})"，這個點先理清楚了我需要設定初始值，然後呢

我的輸入值怎麼直接管理到setState中去，當我onChange={this.handelChange}時候就開始應用handelChange函數了在這裡通過event.target可以直接擷取當前dom元素對象，因為我在這裡用input，擷取其值的方式".value"就可以了。

我在render的時候定義了mess變數來存放初始化message的值，這個js寫法，懂得js效能的人一看就明白了，不多說。看下在瀏覽器的操作：

接下來換種方式：用外掛程式形式

用外掛程式：

    react.js給我們提供了linkState函數，但這個函數來自於React.addons.LinkedStateMixin，首先看下源碼的操作，先進入React.addons.js中去找LinkedStateMixin

這裡幾個屬性就是這個addons.js中提供的所有操作，有重要的react動畫外掛程式CSSTransitionGroup包含其中。接下來我們這次需要linkedStateMixin所以走到這個對象中去看看：

在這裡只提供了linkState函數，直接返回一個ReactLink對象，把參數直接給ReactLink對象去做處理。

 

React的雙向繫結