欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年05月11日 14:41:42   作者:塵生杜若丶  
這篇文章主要介紹了react中value與defaultValue的區(qū)別及說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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

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

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

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

在react中這樣的寫法會出現(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會優(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è)動態(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綁定動態(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è)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 淺談在react中如何實(shí)現(xiàn)掃碼槍輸入

    淺談在react中如何實(shí)現(xiàn)掃碼槍輸入

    這篇文章主要介紹了淺談在react中如何實(shí)現(xiàn)掃碼槍輸入,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • react實(shí)現(xiàn)路由攔截的示例代碼

    react實(shí)現(xiàn)路由攔截的示例代碼

    這篇文章主要介紹react實(shí)現(xiàn)路由攔截的,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2024-02-02
  • Remix 后臺桌面開發(fā)electron-remix-antd-admin

    Remix 后臺桌面開發(fā)electron-remix-antd-admin

    這篇文章主要為大家介紹了Remix 后臺桌面開發(fā)electron-remix-antd-admin的過程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件

    React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件

    這篇文章主要介紹了React如何實(shí)現(xiàn)像Vue一樣將css和js寫在同一文件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • 詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter

    詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter

    這篇文章主要介紹了詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • React渲染機(jī)制及相關(guān)優(yōu)化方案

    React渲染機(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)化的兩個(gè)hooks,感興趣的小伙伴跟著小編一起來看看吧
    2023-07-07
  • 教你使用vscode 搭建react-native開發(fā)環(huán)境

    教你使用vscode 搭建react-native開發(fā)環(huán)境

    本文記錄如何使用vscode打造一個(gè)現(xiàn)代化的react-native開發(fā)環(huán)境,旨在提高開發(fā)效率和質(zhì)量。本文給大家分享我遇到的問題及解決方法,感興趣的朋友跟隨小編一起看看吧
    2021-07-07
  • React Native使用百度Echarts顯示圖表的示例代碼

    React Native使用百度Echarts顯示圖表的示例代碼

    本篇文章主要介紹了React Native使用百度Echarts顯示圖表的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-11
  • Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程

    Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程

    這篇文章主要介紹了Shopee在React?Native?架構(gòu)方面的探索,本文會從發(fā)展歷史、架構(gòu)模型、系統(tǒng)設(shè)計(jì)、遷移方案四個(gè)方向逐一介紹我們?nèi)绾我徊讲降貪M足多團(tuán)隊(duì)在復(fù)雜業(yè)務(wù)中的開發(fā)需求,需要的朋友可以參考下
    2022-07-07
  • React生命周期原理與用法踩坑筆記

    React生命周期原理與用法踩坑筆記

    這篇文章主要介紹了React生命周期原理與用法,結(jié)合實(shí)例形式總結(jié)分析了react生命周期原理、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2020-04-04

最新評論