React的雙向繫結

參見：

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

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

先建立react元件

var nolink =react.createclass({});
react.render(
,document.body);

元件建立好了，需要乙個初始化變數，來公用顯示輸入的資料

var nolink =react.createclass(
}});react.render(
,document.body);

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

var nolink =react.createclass(
},render:
function
() value= />
)    }
});react.render(
,document.body);

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

var nolink =react.createclass(
},handelchange:
function
(event))
},render:
function
() value= />
)    }
});react.render(
,document.body);

onchange直接呼叫handelchange函式，在這只要處理對初始化變數message的重新賦值就可以了，在react中獲取初始值直接用「this.state.初始值",如果想設定初始值直接用"this.setstate()"，這個點先理清楚了我需要設定初始值，然後呢

我的輸入值怎麼直接管理到setstate中去，當我onchange=時候就開始應用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元件

var
reactlink =react.createclass({});
react.render(
,document.body);

接下來思考，在這個元件中我們怎麼引入外面物件，react.js提供了乙個mixins的函式，要是引用物件多了直接以陣列形式展現；其原始碼如圖

在元件中直接這樣使用即可：

var reactlink =react.createclass();
react.render(
,document.body);

linkedstatemixin是拿到了，現在我們要做的是怎麼在定義的vdom上使用，在原始碼中我看到this.props.valuelink這樣的形式，說明在虛擬dom元素中加入valuelink才能使用，

var reactlink =react.createclass(
},render:
function
()/>
)    }
});react.render(
,document.body);

上面的寫法也是最簡潔的寫法，直接將初始化變數message傳給linkstate函式中去，然後react外掛程式原始碼先獲取的虛擬dom中的valuelink屬性再進行操作。

用這樣形式寫好了試一下效果：