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

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

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

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

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

那么當(dāng)使用defaultValue的時(shí)候：

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

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

當(dāng)使用onChange的時(shí)候：

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

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

注意：

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

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

react select標(biāo)簽defaultValue和value踩坑日記

最近在寫react項(xiàng)目，需要設(shè)置下拉框默認(rèn)值.

第一版本

使用defaultValue，發(fā)現(xiàn)刷新頁面，數(shù)據(jù)錯(cuò)誤

分析：defaultValue只在頁面掛載時(shí)渲染一次，后續(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需要接收一個(gè)動(dòng)態(tài)數(shù)據(jù)，dayjs().get(“month”)是一個(gè)死值。

<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綁定動(dòng)態(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é)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論