快捷導(dǎo)航

React踩坑之a(chǎn)ntd輸入框rules中的required=true問(wèn)題

更新時(shí)間：2023年06月07日 08:39:54 作者：star_zone

這篇文章主要介紹了React踩坑之a(chǎn)ntd輸入框rules中的required=true問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React antd輸入框rules中的required=true

你可能跟我一樣，輸入框必輸校驗(yàn)的設(shè)置：required=true，下面是一個(gè)查詢列表中的過(guò)濾條件輸入框

這樣單獨(dú)使用時(shí)，是沒(méi)問(wèn)題的。

但是，如下圖，當(dāng)你有個(gè)頁(yè)面，或者同個(gè)頁(yè)面里，還有一個(gè)新增或修改界面，一般同個(gè)界面的輸入框跟引用界面的輸入框，都是用創(chuàng)建的同一個(gè)form，在這個(gè)新增界面提交的時(shí)候，會(huì)發(fā)現(xiàn)你提交不了，提示你上面的name_ss也是必填的。

這種情況屏幕前的你肯定是有遇到過(guò)的。

但是，經(jīng)過(guò)下面這樣改后，聰明的你馬上就會(huì)明白：

就是讓新增/修改頁(yè)的是否必輸，取決于當(dāng)前是否在新增修改界面，讓列表過(guò)濾條件的姓名必輸，在新增編輯狀態(tài)時(shí)，為非必輸。這樣就能完美解決問(wèn)題。

React+antd實(shí)現(xiàn)下拉框輸入

 
const onChangeSelect = value => {// onSearch對(duì)應(yīng)方法
  if(value){// 在最后一次點(diǎn)擊也就是失去焦點(diǎn)時(shí)是沒(méi)有值得，所以需要判斷
    form.setFieldsValue({ // 設(shè)置表單值
      phoneType:value
    })
  }
}
<Select onClick={type} placeholder="請(qǐng)選擇" allowClear showSearch filterOption={false} onSearch={onChangeSelect}>
                                {
                                    typeList.map((item, index) => {
                                        return <Select.Option key={index} value={item} >
                                            {item}
                                        </Select.Option>
                                    })
                                }
                            </Select>

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

React事件處理過(guò)程中傳參的實(shí)現(xiàn)方法
這篇文章主要介紹了React事件處理過(guò)程中傳參的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-10-10
React Fiber源碼深入分析
Fiber 可以理解為一個(gè)執(zhí)行單元，每次執(zhí)行完一個(gè)執(zhí)行單元，React Fiber就會(huì)檢查還剩多少時(shí)間，如果沒(méi)有時(shí)間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React Fiber架構(gòu)原理剖析,需要的朋友可以參考下
2022-11-11
create-react-app使用antd按需加載的樣式無(wú)效問(wèn)題的解決
這篇文章主要介紹了create-react-app使用antd按需加載的樣式無(wú)效問(wèn)題的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
React中useTransition鉤子函數(shù)的使用詳解
React?18的推出標(biāo)志著React并發(fā)特性的正式到來(lái),其中useTransition鉤子函數(shù)是一個(gè)重要的新增功能,下面我們就來(lái)學(xué)習(xí)一下useTransition鉤子函數(shù)的具體使用吧
2024-02-02
React之useEffect缺少依賴警告問(wèn)題及解決
這篇文章主要介紹了React之useEffect缺少依賴警告問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
React?Context詳解使用方法
Context提供了一個(gè)無(wú)需為每層組件手動(dòng)添加props，就能在組件樹(shù)間進(jìn)行數(shù)據(jù)傳遞的方法。在一個(gè)典型的?React?應(yīng)用中，數(shù)據(jù)是通過(guò)props屬性自上而下（由父及子）進(jìn)行傳遞的，但這種做法對(duì)于某些類型的屬性而言是極其繁瑣的
2022-12-12
React觸發(fā)render的實(shí)現(xiàn)方法
這篇文章主要介紹了React觸發(fā)render的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
React和Vue實(shí)現(xiàn)文件下載進(jìn)度條
本文主要介紹了React和Vue實(shí)現(xiàn)文件下載進(jìn)度條，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
React利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù)
這篇文章主要為大家詳細(xì)介紹了React如何利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下
2024-03-03
React 封裝自定義組件的操作方法
React中自定義組件的重要性在于它們提供了代碼重用、降低耦合性、提升可維護(hù)性、更好的團(tuán)隊(duì)協(xié)作、靈活性和易于測(cè)試和調(diào)試等好處,從而提高了開(kāi)發(fā)效率和質(zhì)量,這篇文章主要介紹了React 封裝自定義組件,需要的朋友可以參考下
2023-12-12