react頁面中存在多個input時巧妙設(shè)置value屬性方式
react頁面中存在多個input時巧妙設(shè)置value屬性
筆者以前是一直在用jquery進(jìn)行開發(fā)的,才轉(zhuǎn)react沒多長時間,對別的倒是沒什么感觸,就是這個input輸入框是深深的抵觸,感覺很煩人,簡單的一個輸入框,你就必須要設(shè)置changeValue的方法去給input加上,這樣你輸入的內(nèi)容才能夠正確的展示到UI頁面中,也因此,如果你頁面中存在多個input時,簡直就是噩夢了
因為你首先要為這些所有的input框綁定上onChange的方法,然后還需要在this.state中去設(shè)置不同的input對應(yīng)不同的值,最后還需要在changeValue的方法中去一一監(jiān)聽input輸入時去修改對應(yīng)的input的值,很是麻煩,筆者之前在寫一個注冊流程的時候被折磨的苦不堪言,最近閑下來可以去優(yōu)化一下以前的代碼,找到了一個可以優(yōu)化一下changeValue的方法
以前筆者的寫法是這樣的:
render部分name的名字是和state中的一一對應(yīng)的。
此處輸入框部分是可以單獨(dú)提取成一個獨(dú)立的小組件的,這樣就不需要每寫一個input框就需要綁定一次方法,這樣也更符合react官方推薦的做法,不過因為這里不是本文介紹的重點(diǎn),就沒有修改了,著重展示一下修改changeValue的方法,現(xiàn)在是根據(jù)input的name名稱去一一判斷究竟是哪個input,然后將input對應(yīng)的value值進(jìn)行修改,但是這樣最大的一個問題就是當(dāng)頁面中input多的時候你的changValue方法會非常的繁瑣,秉承著所有用到switch方法的地方都能優(yōu)化的原則
筆者做了一下優(yōu)化,將changeValue方法改寫為:
是的,僅僅改成了三行,而且你無論有多少個input,這個方法是永遠(yuǎn)不需要去做改變的,唯一需要做到的規(guī)范就是state中的屬性名要于input中的name名稱加以對應(yīng),其實這算是對象的屬性賦值的另一種寫法,因為在對象中Key無法以變量的方式去讀取,所以筆者只好將對象單提出來賦值給變量o
更簡單的方式:
_changeValue(e){ this.setState({ [e.target.name] : e.target.value }) }
react中input框設(shè)置value報錯解析
react input 不設(shè)置onChange的常見錯誤截圖
表單是前端非常重要的一塊內(nèi)容,并且往往包含了錯誤校驗等邏輯?! ?/p>
React對表單元素做了專門的優(yōu)化處理,他對表單元素做了一些抽象,使得他們的使用方式更統(tǒng)一更規(guī)范。
約束性和非約束性組件
表單里面出來了一個新的概念叫“約束性組件”。那么如何理解約束性組件和非約束性組件呢。
約束性組件,簡單的說,就是由react管理了它的value,而非約束性組件的value就是原生的DOM管理的。
他們的寫法上也有很大區(qū)別。
非約束性組件這么寫:
<input type="text" defaultValue="a" />
這個defaultValue
其實就是原生DOM中的value
屬性。這樣寫出的來的組件,其value值就是用戶輸入的內(nèi)容,React完全不管理輸入的過程。
而約束性組件是這么寫的:
<input type="text" value={this.state.name} onChange={this.handleChange} /> //...省略部分代碼 handleChange: function(e) { this.setState({name: e.target.value}); }
這里,value屬性不再是一個寫死的值,他是this.state.name
,而this.state.name
是由this.handleChange
負(fù)責(zé)管理的。
這個時候?qū)嶋H上 input 的 value 根本不是用戶輸入的內(nèi)容。而是onChange 事件觸發(fā)之后,由于 this.setState 導(dǎo)致了一次重新渲染。不過React會優(yōu)化這個渲染過程,實際它依然是通過設(shè)置input的value來實現(xiàn)的。
但是一定要注意,約束性組件顯示的值和用戶輸入的值雖然很多時候是相同的,但他們根本是兩碼事。約束性組件顯示的是this.state.name
的值。你可以在handleChange中對用戶輸入的值做任意的處理,比如你可以做錯誤校驗。
對比約束性組件和非約束性組件的輸入流程:
非約束性組件: 用戶輸入A -> input 中顯示A
約束性組件: 用戶輸入A -> 觸發(fā)onChange事件 -> handleChange 中設(shè)置 state.name = “A” -> 渲染input使他的value變成A
正式因為這樣,強(qiáng)烈推薦使用約束性組件,因為它能更好的控制組件的生命流程。
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
作為老司機(jī)使用 React 總結(jié)的 11 個經(jīng)驗教訓(xùn)
這篇文章主要介紹了作為老司機(jī)使用 React 總結(jié)的 11 個經(jīng)驗教訓(xùn),需要的朋友可以參考下2017-04-04react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面
這篇文章主要介紹了react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面,需要的朋友可以參考下2019-11-11在React項目中實現(xiàn)一個簡單的錨點(diǎn)目錄定位
錨點(diǎn)目錄定位功能在長頁面和文檔類網(wǎng)站中非常常見,它可以讓用戶快速定位到頁面中的某個章節(jié),本文講給大家介紹一下React項目中如何實現(xiàn)一個簡單的錨點(diǎn)目錄定位,文中有詳細(xì)的實現(xiàn)代碼,需要的朋友可以參考下2023-09-09