前言

以前對(duì)于雙向綁定概念來(lái)自于Angular.js，現(xiàn)在我用我感興趣的react.js來(lái)實(shí)現(xiàn)這樣的方式。

有2種方式分析，1：不用插件，2：用插件

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

不用插件：

先創(chuàng)建react組件

var NoLink = React.createClass({});

React.render(<NoLink />,document.body);

組件創(chuàng)建好了，需要一個(gè)初始化變量，來(lái)公用顯示輸入的數(shù)據(jù)

var NoLink = React.createClass({
 getInitialState:function(){
  return {message:''}
 }
});

React.render(<NoLink />,document.body);

message初始值為空，這是正常項(xiàng)目環(huán)境可以這樣設(shè)置。下面我想用一個(gè)input輸入框 和一個(gè)b標(biāo)簽實(shí)現(xiàn)雙向綁定的效果，render所需要的html標(biāo)簽

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輸入框中加了一個(gè)onChange操作，這個(gè)處理當(dāng)我們輸入內(nèi)容的時(shí)候，怎么讓輸入的內(nèi)容同時(shí)展示在b標(biāo)簽中；在react操作中其實(shí)很簡(jiǎn)單。

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直接調(diào)用handelChange函數(shù)，在這只要處理對(duì)初始化變量message的重新賦值就可以了，在react中獲取初始值 直接用“this.state.初始值",如果想設(shè)置初始值直接用"this.setState({初始值：新值}) "，這個(gè)點(diǎn)先理清楚了我需要設(shè)置初始值，然后呢

我的輸入值怎么直接管理到setState中去，當(dāng)我onChange={this.handelChange}時(shí)候就開(kāi)始應(yīng)用handelChange函數(shù)了在這里通過(guò)event.target可以直接獲取當(dāng)前dom元素對(duì)象，因?yàn)槲以谶@里用input，獲取其值的方式".value"就可以了。

我在render的時(shí)候定義了mess變量來(lái)存放初始化message的值，這個(gè)js寫(xiě)法，懂得js性能的人一看就明白了，不多說(shuō)?？聪略跒g覽器的操作：

接下來(lái)?yè)Q種方式：用插件形式

用插件：

react.js給我們提供了linkState函數(shù)，但這個(gè)函數(shù)來(lái)自于React.addons.LinkedStateMixin，首先看下源碼的操作，先進(jìn)入React.addons.js中去找LinkedStateMixin

這里幾個(gè)對(duì)象就是這個(gè)addons.js中提供的所有操作，有重要的react動(dòng)畫(huà)插件CSSTransitionGroup包含其中。接下來(lái)我們這次需要linkedStateMixin所以走到這個(gè)對(duì)象中去看看：

在這里只提供了linkState函數(shù)，直接返回一個(gè)ReactLink對(duì)象，把參數(shù)直接給ReactLink對(duì)象去做處理。

主要這個(gè)東西怎么用在實(shí)例中，先創(chuàng)建一個(gè)react組件

var ReactLink = React.createClass({});


React.render(<ReactLink />,document.body);

接下來(lái)思考，在這個(gè)組件中我們?cè)趺匆胪饷鎸?duì)象，react.js提供了一個(gè)mixins的函數(shù)，要是引用對(duì)象多了直接以數(shù)組形式展現(xiàn)；其源碼如圖

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

var ReactLink = React.createClass({
 //引用公共插件linkedStateMixin
 mixins:[React.addons.LinkedStateMixin]
});


React.render(<ReactLink />,document.body);

linkedStateMixin是拿到了，現(xiàn)在我們要做的是怎么在定義的vdom上使用，在源碼中我看到this.props.valueLink  這樣的形式，說(shuō)明在虛擬dom元素中加入valueLink才能使用，

var ReactLink = React.createClass({
 //引用公共插件linkedStateMixin
 mixins:[React.addons.LinkedStateMixin],
 getInitialState:function(){
  return {message:''}
 },
 render:function(){
  return (
    <div>
     <input type="text" valueLink = {this.linkState('message')}/>
     <b>{this.state.message}</b>
    </div>
  )
 }
});


React.render(<ReactLink />,document.body);

上面的寫(xiě)法也是最簡(jiǎn)潔的寫(xiě)法，直接將初始化變量message傳給linkState函數(shù)中去，然后react插件源碼先獲取的虛擬dom中的valueLink屬性再進(jìn)行操作。

用這樣形式寫(xiě)好了 試一下效果：

完全OK.

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論