前言

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了澧縣免費(fèi)建站歡迎大家使用！

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

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

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

不用插件：

先創(chuàng)建react組件

var NoLink = React.createClass({});

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

組件創(chuàng)建好了，需要一個(gè)初始化變量，來公用顯示輸入的數(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í)候就開始應(yīng)用handelChange函數(shù)了在這里通過event.target可以直接獲取當(dāng)前dom元素對(duì)象，因?yàn)槲以谶@里用input，獲取其值的方式".value"就可以了。

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

接下來換種方式：用插件形式

用插件：

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

這里幾個(gè)對(duì)象就是這個(gè)addons.js中提供的所有操作，有重要的react動(dòng)畫插件CSSTransitionGroup包含其中。接下來我們這次需要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);

接下來思考，在這個(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  這樣的形式，說明在虛擬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);

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

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

完全OK.

總結(jié)

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

當(dāng)前文章：React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法詳解
網(wǎng)站路徑：http://chinadenli.net/article42/geoeec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、小程序開發(fā)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)