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

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

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

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

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

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

受控組件(表單)

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

1. importReact,{Component}from'react'
2.  
3. exportclassTablesextendsComponent{
4.  
5. state={
6. name:"xiling"
7. }
8.  
9. render(){
10. return(
11.  
12. "text"value={this.state.name}/>
13.  
14. )
15. }
16. }
17.  
18. exportdefaultTables

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

1. changes=(ev)=>{
2. this.setState({
3. name:ev.target.value
4. })
5. }
6.  
7. render(){
8. return(
9.  
10. "text"value={this.state.name}onChange={this.changes}/>
11.  
12. )
13. }
14. }

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

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

1. importReact,{Component}from'react'
2.  
3. exportclassTablesextendsComponent{
4.  
5. state={
6. name:"xiling",
7. age:18
8. }
9.  
10. changes=(ev)=>{
11. this.setState({
12. name:ev.target.value
13. })
14. }
15.  
16. ages=(ev)=>{
17. this.setState({
18. age:ev.target.value
19. })
20. }
21.  
22. render(){
23. return(
24.  
25. "text"value={this.state.name}onChange={this.changes}/>
26. "text"value={this.state.age}onChange={this.ages}/>
27.  
28. )
29. }
30. }
31.  
32. exportdefaultTables

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

1. render(){
2. return(
3.  
4. "text"value={this.state.name}
5. onChange={(ev)=>{
6. this.setState({name:ev.target.value})
7. }}
8. />
9. "text"value={this.state.age}
10. onChange={(ev)=>{
11. this.setState({age:ev.target.value})
12. }}
13. />
14.  
15. )
16. }

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

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

當(dāng)然可以!

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

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

1. importReact,{Component}from'react'
2.  
3. exportclassTablesextendsComponent{
4.  
5. state={
6. name:"xiling",
7. age:18
8. }
9.  
10. tables=(ev)=>{
11. constprop=ev.target.name
12. this.setState({
13. [prop]:ev.target.value
14. })
15. }
16.  
17. render(){
18. return(
19.  
20. "text"name="name"value={this.state.name}onChange={this.tables}/>
21. "text"name="age"value={this.state.age}onChange={(ev)=>this.tables(ev)}/>
22.  
23. )
24. }
25. }
26.  
27. exportdefaultTables

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

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

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

1. render(){
2. return(
3.  
4. {/*第一種就是加一個readOnly屬性,告訴React表單為只讀的，不需要修改*/}
5. "text"value={this.state.name}readOnlyonChange={(ev)=>{
6. this.setState({name:ev.target.value})
7. }}/>
8. {/*需要注意，設(shè)置為只讀后，即便添加修改事件，也不能修改*/}
9.  
10.  
11. {/*第二種就是使用defaultValue賦值*/}
12. {/*意思就是設(shè)置默認(rèn)值*/}
13. "text"defaultValue={this.state.age}/>
14.  
15. )
16. }

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

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

原文鏈接：https://mp.weixin.qq.com/s/jjosCESZlj3owxRSQnmFQQ