這篇文章主要介紹React中受控組件與數(shù)據(jù)共享的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比鯉城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式鯉城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鯉城地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

具體如下：

在HTML當(dāng)中，像<input>,<textarea>, 和 <select>這類表單元素會(huì)自己儲(chǔ)存值，并且根據(jù)用戶輸入進(jìn)行更新。但在React中，可變的值通常保存在組件的state中，并且只能用 setState() 方法進(jìn)行更新。為了解決二者的矛盾，可以讓HTML元素不再自己儲(chǔ)存數(shù)據(jù)，而使用來自于react的state。也就是說HTML元素把數(shù)據(jù)保存在react組件的state中，并根據(jù)state值來渲染更新HTML的內(nèi)容。這種值由React控制的表單元素稱為受控組件。

1、input

例如將input輸入的名字保存在state.name中，并且設(shè)置input顯示的value值為state.name。當(dāng)input中輸入變化時(shí)，onChange觸發(fā)updateName函數(shù)更新name值，從而使input中顯示的value發(fā)生變化。當(dāng)點(diǎn)擊提交按鈕時(shí)onClick觸發(fā)submit()方法來阻止默認(rèn)的提交，并打印提示信息：

class ControlledForm extends React.Component{
 constructor(props){
  super(props);
  this.state={
   name:''
  };
  this.updateName=this.updateName.bind(this);
  this.submit=this.submit.bind(this);
 }
 updateName(e){        //在調(diào)用函數(shù)時(shí)會(huì)默認(rèn)傳入時(shí)間參數(shù)e
  this.setState({
   name:e.target.value    //更新name的值為input中輸入的值
  })
 }
 submit(e){          //自己定義點(diǎn)擊submit后的操作
  console.log("姓名"+this.state.name+"提交成功");
  e.preventDefault();     //阻止表單默認(rèn)提交行為
 }
 render(){
  return (
   <form onSubmit={this.submitForm}>
     <label>
       姓名：
       <input type="text" value={this.state.name} onChange={this.updateName} />
     </label>
     <input type="submit" value="提交" onClick={this.submit} />
   </form>
  )
 }
}

使用受控組件使得頁面的數(shù)據(jù)都處于react的控制之下，而且可以對(duì)其數(shù)據(jù)進(jìn)行處理之后再渲染到頁面上。

2、textarea

在React中使用<textarea>：為了對(duì)textarea的輸入內(nèi)容進(jìn)行控制，react中的textarea像input一樣由value來控制其顯示的值，并且通過e.target.value將textarea中的值存入state中。textarea的使用也由閉合式標(biāo)簽<textarea></textarea>變?yōu)殚_放式標(biāo)簽：

<textarea value={this.state.text} onChange={this.updateText} />

3、select

同理，在React中的<select>也通過value來控制哪個(gè)option的選中，并通過e.target.value將選中的option的值傳給state。例如和this.state.sex值相同的option會(huì)被顯示選中

<select value={this.state.sex} onChange={this.updateSex}>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

4、利用name處理多個(gè)受控組件

如上，我們需要為每個(gè)受控組件都設(shè)置更新方法onChange，而且每個(gè)組件的更新方法都很類似，這樣看起來很麻煩，我們可以根據(jù)name屬性區(qū)分不同的組件所對(duì)應(yīng)的state值，利用一個(gè)函數(shù)來實(shí)現(xiàn)多個(gè)組件state值的更新：

<select value={this.state.sex} name="sex" onChange={this.updateForm}>
updateForm(e){
 let name=e.target.name;     //獲取組件的name
 let value=e.target.value;    //獲取組件的值value
 this.setState({
  [name]:value         //為不同name的組件設(shè)置value
 })
}

在setState方法中，通過ES6的語法計(jì)算屬性[]，在中括號(hào)中指定要更新的屬性名的表達(dá)式來更新不同的state。例如當(dāng)select調(diào)用updateForm()時(shí)，name="sex",value="male"，則通過setState將state.sex值設(shè)為male。

5、組件間數(shù)據(jù)共享

當(dāng)兩個(gè)組件要同時(shí)使用一個(gè)變量時(shí)，由于state只能被它所定義的組件修改、訪問，因此不能把state賦給某個(gè)組件，而應(yīng)該將state提升至兩個(gè)組件最近的公共父組件，父組件再通過props將值傳遞給子組件，這樣兩個(gè)子組件就都可以訪問了。那么子組件怎么去修改父組件的state呢？子組件通過props屬性來調(diào)用父組件的方法從而修改父組件的state，這樣兩個(gè)組件就通過父組件實(shí)現(xiàn)了對(duì)state的共享。例如父組件Parent的一個(gè)子組件ChildInput負(fù)責(zé)接收用戶的輸入，保存在state.text中，在另一個(gè)子組件ChildShow中顯示用戶的輸入：

class Parent extends React.Component{
 constructor(props){
  super(props);
  this.state={
   text:''
  };
  this.updateText=this.updateText.bind(this);
 }
 updateText(value){
  this.setState({
   text:value
  })
 }
 render(){
  return (
   <fieldset>
     <legend>提升state</legend>    //父組件updateInput屬性指向updateText方法
     <ChildInput text={this.state.text} updateInput={this.updateText}/>
     <ChildShow text={this.state.text} />
   </fieldset>
  )
 }
}
class ChildInput extends React.Component{
 constructor(props){
  super(props);
  this.handleChange=this.handleChange.bind(this);
 }
 handleChange(e){    //在子組件的方法中調(diào)用父組件的updateInput更新text的值
  this.props.updateInput(e.target.value);
 }
 render(){
  return (
   <div>
     <label>
       請(qǐng)輸入：
       <input type="text" value={this.props.text} onChange={this.handleChange}/>
     </label>
   </div>
  )
 }
}
class ChildShow extends React.Component{
 constructor(props){
  super(props);    //通過調(diào)用父組件構(gòu)造方法將父組件的props傳遞給子組件
 }
 render(){
  return (
   <div>
     <p>輸入為：{this.props.text}</p>
   </div>
  )
 }
}
ReactDOM.render(
 <Parent/>,
 document.getElementById('app')
)

運(yùn)行結(jié)果如圖：

上例在react中的數(shù)據(jù)流動(dòng)如下：

1、當(dāng)在input中中輸入內(nèi)容時(shí)，input內(nèi)容改變onChange觸發(fā)ChildInput組件的handleChange方法，該方法通過this.props調(diào)用父組件updateInput方法并傳遞輸入的內(nèi)容e.target.value。

2、父組件Parent在引用子組件ChildInput時(shí)為其定義updateInput屬性為this.updateText方法，因此觸發(fā)updateText方法，在該方法中接收子組件傳遞的參數(shù)value，并通過setState方法修改state.text的值。

3、當(dāng)state.text值發(fā)生改變時(shí)，父組件Parent通過屬性props將值傳遞給子組件ChildInput與ChildShow，引起子組件屬性改變，從而子組件重新渲染頁面內(nèi)容。

以上是“React中受控組件與數(shù)據(jù)共享的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：React中受控組件與數(shù)據(jù)共享的示例分析-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://jinyejixie.com/article36/psjsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站建設(shè)、品牌網(wǎng)站制作、微信小程序、小程序開發(fā)、響應(yīng)式網(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)