React中受控組件與數(shù)據(jù)共享的示例分析

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

具體如下：

在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)注億速云行業(yè)資訊頻道！