React學(xué)習(xí)之受控組件與數(shù)據(jù)共享實例分析

更新時間：2020年01月06日 09:48:22 作者：theVicTory

這篇文章主要介紹了React學(xué)習(xí)之受控組件與數(shù)據(jù)共享,結(jié)合實例形式分析了React受控組件與組件間數(shù)據(jù)共享相關(guān)原理與使用技巧,需要的朋友可以參考下

本文實例講述了React學(xué)習(xí)之受控組件與數(shù)據(jù)共享。分享給大家供大家參考，具體如下：

在HTML當中，像<input>,<textarea>, 和 <select>這類表單元素會自己儲存值，并且根據(jù)用戶輸入進行更新。但在React中，可變的值通常保存在組件的state中，并且只能用 setState() 方法進行更新。為了解決二者的矛盾，可以讓HTML元素不再自己儲存數(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。當input中輸入變化時，onChange觸發(fā)updateName函數(shù)更新name值，從而使input中顯示的value發(fā)生變化。當點擊提交按鈕時onClick觸發(fā)submit()方法來阻止默認的提交，并打印提示信息：

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ù)e
  this.setState({
   name:e.target.value    //更新name的值為input中輸入的值
  })
 }
 submit(e){          //自己定義點擊submit后的操作
  console.log("姓名"+this.state.name+"提交成功");
  e.preventDefault();     //阻止表單默認提交行為
 }
 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的控制之下，而且可以對其數(shù)據(jù)進行處理之后再渲染到頁面上。

2、textarea

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

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

3、select

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

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

4、利用name處理多個受控組件

如上，我們需要為每個受控組件都設(shè)置更新方法onChange，而且每個組件的更新方法都很類似，這樣看起來很麻煩，我們可以根據(jù)name屬性區(qū)分不同的組件所對應(yīng)的state值，利用一個函數(shù)來實現(xiàn)多個組件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的語法計算屬性[]，在中括號中指定要更新的屬性名的表達式來更新不同的state。例如當select調(diào)用updateForm()時，name="sex",value="male"，則通過setState將state.sex值設(shè)為male。

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

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

運行結(jié)果如圖：