react中value與defaultValue的區(qū)別及說明

更新時間：2023年05月11日 14:41:42 作者：塵生杜若丶

這篇文章主要介紹了react中value與defaultValue的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react中value與defaultValue的區(qū)別

在日常開發(fā)的過程中，我們經(jīng)常會使用input輸入框，有時會需要使用value綁定數(shù)據(jù)，針對這一點，react提出了一個概念，分為了約束性組件和非約束性組件。

之前正常使用的時候我們只需要這樣寫：

<input value={綁定的數(shù)據(jù)} type='text'/>

在react中這樣的寫法會出現(xiàn)一個錯誤，提示你應該使用onChange來監(jiān)聽這個input或者使用defaultValue來綁定數(shù)據(jù)。這樣可以消除這個錯誤。

那么當使用defaultValue的時候：

<input ?defaultValue={綁定的數(shù)據(jù)} type='text'/>

這個時候就是一個非約束性組件，其實就是原生DOM中的value屬性，這樣寫出來的組件，其value值就是用戶輸入的內容，和react沒有關系，完全不管輸入的過程。

當使用onChange的時候：

<input value={綁定的數(shù)據(jù)} type="text" onChange={this.handleChange}/>

這個時候就是一個約束性組件，這里value不再是寫死的值，他是你所綁定的數(shù)據(jù)，綁定的數(shù)據(jù)是由this.handleChange負責管理的。這個時候實際上input的value根本不是用戶輸入的內容。而是onChange事件觸發(fā)之后，由this.state導致了一次重新渲染，不過react會優(yōu)化這個過程。

注意：

如果在使用input時只需要獲取model里的值時，使用defaultValue就可以了。

如果需要獲取model的值并且還需要改變它的時候，就需要使用value結合onChange事件就可以了。

react select標簽defaultValue和value踩坑日記

最近在寫react項目，需要設置下拉框默認值.

第一版本

使用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，點擊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>