[[423923]]

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

React 中表單的處理，實際是用戶與應用之間的交互邏輯，而應用與用戶之間的交互都是表單來承接的，所以我們實際學習的內容就是 JSX 與用戶表單數據的交互。在 React 中，表單又分為了受控表單和非受控表單兩中類別。

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

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

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

接下來，我們通過具體的代碼來進行學習研究。

受控組件(表單)

我們使用普通的表單，在表單中展示 state 中的數據：

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 

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

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

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

這個邏輯并沒有什么問題，但是，如果我們有兩個表單，就需要對應的兩個事件處理函數，如果有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 

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

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> 
    ) 
  } 

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

能不能對表單的修改進行統一的管理呢?

當然可以!

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

因為與 state 是保持一致的，所以，我們就可以直接把表單屬性當作要修改的 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 

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

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

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

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

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

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