[[423923]]

上篇《React 數(shù)據(jù)流管理：組件之間數(shù)據(jù)是如何傳遞的?》，我們利用 Props 完成了對 React 數(shù)據(jù)流管理的所有內(nèi)容的學(xué)習(xí)。而之前提到的關(guān)于 JSX 交互部分，用戶的頁面操作，都是由表單承接的，那么接下來的表單的處理就是重點(diǎn)了。

React 中表單的處理，實(shí)際是用戶與應(yīng)用之間的交互邏輯，而應(yīng)用與用戶之間的交互都是表單來承接的，所以我們實(shí)際學(xué)習(xí)的內(nèi)容就是 JSX 與用戶表單數(shù)據(jù)的交互。在 React 中，表單又分為了受控表單和非受控表單兩中類別。

受控表單：表單元素的值全部出 React 來進(jìn)行管理，此時表單元素中的值都放在 state 中，所以表單元素里的值需要從 state 中進(jìn)行獲取。

非受控表單：不受 React 管理控制，表單元素的數(shù)據(jù)由 DOM 元素本身進(jìn)行管理，表單元素的值也是存放在 DOM 元素里的，獲取的時候需要操作 DOM 元素。

React 的基本邏輯是數(shù)據(jù)決定 UI 的，所以 React 必然要控制數(shù)據(jù)，而非受控表單顯然不符合這個基本邏輯，實(shí)際開發(fā)中也很少遇到，重點(diǎn)還是受控表單。

接下來，我們通過具體的代碼來進(jìn)行學(xué)習(xí)研究。

受控組件(表單)

我們使用普通的表單，在表單中展示 state 中的數(shù)據(jù)：

import React, { Component } from 'react' 
 
export class Tables extends Component { 
 
  state = { 
    name:"xiling" 
  } 
 
  render() { 
    return ( 
      <div> 
        <input type="text"  value={this.state.name} /> 
      </div> 
    ) 
  } 
} 
 
export default Tables 

頁面中呈現(xiàn)的表單及內(nèi)容是完全沒問題的，但是當(dāng)我們在頁面中嘗試修改表單數(shù)據(jù)時，你會發(fā)現(xiàn)是無法修改的，而且還報錯了。這和前面學(xué)習(xí)的 state 的修改條件是一致的，不能直接修改，需要通過 setState() 方法進(jìn)行數(shù)據(jù)的修改，代碼如下：

changes = (ev)=>{ 
    this.setState({ 
      name:ev.target.value 
    }) 
  } 
 
  render() { 
    return ( 
      <div> 
        <input type="text"  value={this.state.name} onChange={this.changes} /> 
      </div> 
    ) 
  } 
} 

表單的修改是由用戶輸入操作的，也就是用戶輸入到表單是什么值，相對應(yīng)的 state 就改成什么值。而這個操作，就需要獲取到表單中用戶的輸入，同時我們也需要知道用戶是何時觸發(fā)修改動作的，所以，我們需要給表單綁定一個修改值這個動作的觸發(fā)事件 onChange，在事件觸發(fā)后，事件處理函數(shù)接收 事件對象(ev)從而獲取用戶的修改內(nèi)容，然后再通過 setState() 修改數(shù)據(jù)。

這個邏輯并沒有什么問題，但是，如果我們有兩個表單，就需要對應(yīng)的兩個事件處理函數(shù)，如果有3個表單，4個表單，10個表單……

import React, { Component } from 'react' 
 
export class Tables extends Component { 
 
  state = { 
    name:"xiling", 
    age:18 
  } 
 
  changes = (ev)=>{ 
    this.setState({ 
      name:ev.target.value 
    }) 
  } 
 
  ages = (ev)=>{ 
    this.setState({ 
      age:ev.target.value 
    }) 
  } 
 
  render() { 
    return ( 
      <div> 
        <input type="text"  value={this.state.name} onChange={this.changes} /> 
        <input type="text"  value={this.state.age} onChange={this.ages} /> 
      </div> 
    ) 
  } 
} 
 
export default Tables 

這樣的寫法肯定不對，最直觀的修改辦法就是將單獨(dú)的事件處理函數(shù)刪除，直接把事件的函數(shù)處理寫到事件綁定上，比如這樣：

render() { 
    return ( 
      <div> 
        <input type="text"  value={this.state.name}  
          onChange={(ev)=>{ 
            this.setState({name:ev.target.value}) 
          }}  
          /> 
        <input type="text"  value={this.state.age}  
          onChange={(ev)=>{ 
            this.setState({age:ev.target.value}) 
          }} 
          /> 
      </div> 
    ) 
  } 

但是，即便這樣，依然存在需要為每個表單單獨(dú)寫修改邏輯的問題，表單一旦多了之后，也是一個非常棘手的問題。

能不能對表單的修改進(jìn)行統(tǒng)一的管理呢?

當(dāng)然可以!

我們利用表單屬性就可以實(shí)現(xiàn)。做法也很簡單，我們給每一個表單添加一個 name 屬性，屬性值與 state 中的屬性值保持一致，這樣在事件處理函數(shù)中就可以獲取表單的屬性值了。

因為與 state 是保持一致的，所以，我們就可以直接把表單屬性當(dāng)作要修改的 state 屬性值使用了，代碼如下：

import React, { Component } from 'react' 
 
export class Tables extends Component { 
 
  state = { 
    name:"xiling", 
    age:18 
  } 
 
  tables = (ev)=>{ 
    const prop = ev.target.name 
    this.setState({ 
      [prop]:ev.target.value 
    }) 
  } 
 
  render() { 
    return ( 
      <div> 
        <input type="text" name="name"  value={this.state.name} onChange={this.tables} /> 
        <input type="text" name="age" value={this.state.age} onChange={(ev)=>this.tables(ev)} /> 
      </div> 
    ) 
  } 
} 
 
export default Tables 

最后，我們再來解決報錯問題，報錯的原因在控制臺中已經(jīng)很明確了：受控表單需要對應(yīng)的事件處理來控制數(shù)據(jù)的變化，如果沒有那就會出現(xiàn)報錯。

但是，如果我只想將數(shù)據(jù)在表單中展示，并不想進(jìn)行控制修改的情況下，依然出現(xiàn)這樣的錯誤，就非常不友好了，那應(yīng)該怎么做呢?

有兩種解決辦法，都很簡單，我們來看一下：

render() { 
    return ( 
      <div> 
        {/* 第一種就是加一個 readOnly 屬性,告訴 React 表單為只讀的，不需要修改 */} 
        <input type="text" value={this.state.name} readOnly onChange={(ev) => { 
          this.setState({ name: ev.target.value }) 
        }} /> 
        {/* 需要注意，設(shè)置為只讀后，即便添加修改事件，也不能修改 */} 
 
 
        {/* 第二種就是使用 defaultValue 賦值 */} 
        {/* 意思就是設(shè)置默認(rèn)值 */} 
        <input type="text" defaultValue={this.state.age} /> 
      </div> 
    ) 
  } 

下篇，我會展示常用的受控表單示例和非受控表單的原始及規(guī)范化寫法。

再寫個 React 語法入門案例，我就非常像話地結(jié)束這一系列，阿里嘎多!