React 中 JSX 與用戶表單數(shù)據(jù)的交互
上篇《React 數(shù)據(jù)流管理：組件之間數(shù)據(jù)是如何傳遞的？》，我們利用 Props 完成了對 React 數(shù)據(jù)流管理的所有內(nèi)容的學習。而之前提到的關于 JSX 交互部分，用戶的頁面操作，都是由表單承接的，那么接下來的表單的處理就是重點了。
React 中表單的處理，實際是用戶與應用之間的交互邏輯，而應用與用戶之間的交互都是表單來承接的，所以我們實際學習的內(nèi)容就是 JSX 與用戶表單數(shù)據(jù)的交互。在 React 中，表單又分為了受控表單和非受控表單兩中類別。
受控表單：表單元素的值全部出 React 來進行管理，此時表單元素中的值都放在 state 中，所以表單元素里的值需要從 state 中進行獲取。
非受控表單：不受 React 管理控制，表單元素的數(shù)據(jù)由 DOM 元素本身進行管理，表單元素的值也是存放在 DOM 元素里的，獲取的時候需要操作 DOM 元素。
React 的基本邏輯是數(shù)據(jù)決定 UI 的，所以 React 必然要控制數(shù)據(jù)，而非受控表單顯然不符合這個基本邏輯，實際開發(fā)中也很少遇到，重點還是受控表單。
接下來，我們通過具體的代碼來進行學習研究。
受控組件（表單）
我們使用普通的表單，在表單中展示 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)容是完全沒問題的，但是當我們在頁面中嘗試修改表單數(shù)據(jù)時，你會發(fā)現(xiàn)是無法修改的，而且還報錯了。這和前面學習的 state 的修改條件是一致的，不能直接修改，需要通過 setState() 方法進行數(shù)據(jù)的修改，代碼如下：
changes = (ev)=>{this.setState({name:ev.target.value})}render() {return (<div><input type="text" value={this.state.name} onChange={this.changes} /></div>)}}
表單的修改是由用戶輸入操作的，也就是用戶輸入到表單是什么值，相對應的 state 就改成什么值。而這個操作，就需要獲取到表單中用戶的輸入，同時我們也需要知道用戶是何時觸發(fā)修改動作的，所以，我們需要給表單綁定一個修改值這個動作的觸發(fā)事件 onChange，在事件觸發(fā)后，事件處理函數(shù)接收 事件對象（ev）從而獲取用戶的修改內(nèi)容，然后再通過 setState() 修改數(shù)據(jù)。
這個邏輯并沒有什么問題，但是，如果我們有兩個表單，就需要對應的兩個事件處理函數(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
這樣的寫法肯定不對，最直觀的修改辦法就是將單獨的事件處理函數(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>)}
但是，即便這樣，依然存在需要為每個表單單獨寫修改邏輯的問題，表單一旦多了之后，也是一個非常棘手的問題。
能不能對表單的修改進行統(tǒng)一的管理呢？
當然可以！
我們利用表單屬性就可以實現(xiàn)。做法也很簡單，我們給每一個表單添加一個 name 屬性，屬性值與 state 中的屬性值保持一致，這樣在事件處理函數(shù)中就可以獲取表單的屬性值了。
因為與 state 是保持一致的，所以，我們就可以直接把表單屬性當作要修改的 state 屬性值使用了，代碼如下：
import React, { Component } from 'react'export class Tables extends Component {state = {name:"xiling",age:18}tables = (ev)=>{const prop = ev.target.namethis.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)很明確了：受控表單需要對應的事件處理來控制數(shù)據(jù)的變化，如果沒有那就會出現(xiàn)報錯。
但是，如果我只想將數(shù)據(jù)在表單中展示，并不想進行控制修改的情況下，依然出現(xiàn)這樣的錯誤，就非常不友好了，那應該怎么做呢？
有兩種解決辦法，都很簡單，我們來看一下：
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>)}
下篇，我會展示常用的受控表單示例和非受控表單的原始及規(guī)范化寫法。
再寫個 React 語法入門案例，我就非常像話地結束這一系列，阿里嘎多！
推薦閱讀：
React 數(shù)據(jù)流管理：組件之間數(shù)據(jù)是如何傳遞的？
拆解高頻面試題：你是如何理解單向數(shù)據(jù)流的？
恭喜你又在前端道路上進步了一點點。
點個“在看”和“贊”吧！