react中value與defaultValue的區(qū)別及說明
react中value與defaultValue的區(qū)別
在日常開發(fā)的過程中,我們經(jīng)常會使用input輸入框,有時會需要使用value綁定數(shù)據(jù),針對這一點(diǎn),react提出了一個概念,分為了約束性組件和非約束性組件。
之前正常使用的時候我們只需要這樣寫:
<input value={綁定的數(shù)據(jù)} type='text'/>
在react中這樣的寫法會出現(xiàn)一個錯誤,提示你應(yīng)該使用onChange來監(jiān)聽這個input或者使用defaultValue來綁定數(shù)據(jù)。這樣可以消除這個錯誤。
那么當(dāng)使用defaultValue的時候:
<input ?defaultValue={綁定的數(shù)據(jù)} type='text'/>
這個時候就是一個非約束性組件,其實(shí)就是原生DOM中的value屬性,這樣寫出來的組件,其value值就是用戶輸入的內(nèi)容,和react沒有關(guān)系,完全不管輸入的過程。
當(dāng)使用onChange的時候:
<input value={綁定的數(shù)據(jù)} type="text" onChange={this.handleChange}/>
這個時候就是一個約束性組件,這里value不再是寫死的值,他是你所綁定的數(shù)據(jù),綁定的數(shù)據(jù)是由this.handleChange負(fù)責(zé)管理的。這個時候?qū)嶋H上input的value根本不是用戶輸入的內(nèi)容。而是onChange事件觸發(fā)之后,由this.state導(dǎo)致了一次重新渲染,不過react會優(yōu)化這個過程。
注意:
如果在使用input時只需要獲取model里的值時,使用defaultValue就可以了。
如果需要獲取model的值并且還需要改變它的時候,就需要使用value結(jié)合onChange事件就可以了。
react select標(biāo)簽defaultValue和value踩坑日記
最近在寫react項(xiàng)目,需要設(shè)置下拉框默認(rèn)值.
第一版本
使用defaultValue,發(fā)現(xiàn)刷新頁面,數(shù)據(jù)錯誤
分析:defaultValue只在頁面掛載時渲染一次,后續(xù)數(shù)據(jù)發(fā)生變化,不再重新渲染
<div className="month"> ? ? <select defaultValue="dayjs().get("month")" onChange={(e) => onChange(e)}> ? ? ? ? {months.map(month => <option key={month} value={month} >{month}</option>)} ? ? </select> ? ? 月 </div>
第二版
修改為value,點(diǎn)擊select,發(fā)現(xiàn)數(shù)據(jù)更新了,但頁面不更新;
分析:value需要接收一個動態(tài)數(shù)據(jù),dayjs().get(“month”)是一個死值。
<div className="month"> ? ? <select value="dayjs().get("month")" onChange={(e) => onChange(e)}> ? ? ? ? {months.map(month => <option key={month} value={month} >{month}</option>)} ? ? </select> ? ? 月 </div>
第三版
使用value綁定動態(tài)數(shù)據(jù),且綁定onChange監(jiān)聽函數(shù)
? ? const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => { ? ? ? ? let date = e.target.value ? ? ? ? if (date.length === 4) { ? ? ? ? ? ? setSelectDate({ ? ? ? ? ? ? ? ? year: date, ? ? ? ? ? ? ? ? month: selectDate.month ? ? ? ? ? ? }) ? ? ? ? } else { ? ? ? ? ? ? setSelectDate({ ? ? ? ? ? ? ? ? year: selectDate.year, ? ? ? ? ? ? ? ? month: date ? ? ? ? ? ? }) ? ? ? ? } ? ? } <div className="month"> ? ? <select value={selectDate.month} onChange={(e) => onChange(e)}> ? ? ? ? {months.map(month => <option key={month} value={month} >{month}</option>)} ? ? </select> ? ? 月 </div>
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Remix 后臺桌面開發(fā)electron-remix-antd-admin
這篇文章主要為大家介紹了Remix 后臺桌面開發(fā)electron-remix-antd-admin的過程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件
這篇文章主要介紹了React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter
這篇文章主要介紹了詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12React渲染機(jī)制及相關(guān)優(yōu)化方案
這篇文章主要介紹了react中的渲染機(jī)制以及相關(guān)的優(yōu)化方案,內(nèi)容包括react渲染步驟、concurrent機(jī)制以及產(chǎn)生作用的機(jī)會,簡單模擬實(shí)現(xiàn) concurrent mode,基于作業(yè)調(diào)度優(yōu)先級的思路進(jìn)行項(xiàng)目優(yōu)化的兩個hooks,感興趣的小伙伴跟著小編一起來看看吧2023-07-07教你使用vscode 搭建react-native開發(fā)環(huán)境
本文記錄如何使用vscode打造一個現(xiàn)代化的react-native開發(fā)環(huán)境,旨在提高開發(fā)效率和質(zhì)量。本文給大家分享我遇到的問題及解決方法,感興趣的朋友跟隨小編一起看看吧2021-07-07React Native使用百度Echarts顯示圖表的示例代碼
本篇文章主要介紹了React Native使用百度Echarts顯示圖表的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程
這篇文章主要介紹了Shopee在React?Native?架構(gòu)方面的探索,本文會從發(fā)展歷史、架構(gòu)模型、系統(tǒng)設(shè)計、遷移方案四個方向逐一介紹我們?nèi)绾我徊讲降貪M足多團(tuán)隊(duì)在復(fù)雜業(yè)務(wù)中的開發(fā)需求,需要的朋友可以參考下2022-07-07