React踩坑之a(chǎn)ntd輸入框rules中的required=true問題
更新時間：2023年06月07日 08:39:54 作者：star_zone
這篇文章主要介紹了React踩坑之a(chǎn)ntd輸入框rules中的required=true問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
React antd輸入框rules中的required=true
你可能跟我一樣，輸入框必輸校驗的設(shè)置：required=true，下面是一個查詢列表中的過濾條件輸入框
這樣單獨使用時，是沒問題的。
但是，如下圖，當(dāng)你有個頁面，或者同個頁面里，還有一個新增或修改界面，一般同個界面的輸入框跟引用界面的輸入框，都是用創(chuàng)建的同一個form，在這個新增界面提交的時候，會發(fā)現(xiàn)你提交不了，提示你上面的name_ss也是必填的。
這種情況屏幕前的你肯定是有遇到過的。
但是，經(jīng)過下面這樣改后，聰明的你馬上就會明白：
就是讓新增/修改頁的是否必輸，取決于當(dāng)前是否在新增修改界面，讓列表過濾條件的姓名必輸，在新增編輯狀態(tài)時，為非必輸。這樣就能完美解決問題。
React+antd實現(xiàn)下拉框輸入
const onChangeSelect = value => {// onSearch對應(yīng)方法
if(value){// 在最后一次點擊也就是失去焦點時是沒有值得，所以需要判斷
form.setFieldsValue({ // 設(shè)置表單值
phoneType:value
})
}
}
<Select onClick={type} placeholder="請選擇" allowClear showSearch filterOption={false} onSearch={onChangeSelect}>
{
typeList.map((item, index) => {
return <Select.Option key={index} value={item} >
{item}
</Select.Option>
})
}
</Select>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React事件處理過程中傳參的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
Fiber 可以理解為一個執(zhí)行單元，每次執(zhí)行完一個執(zhí)行單元，React Fiber就會檢查還剩多少時間，如果沒有時間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React Fiber架構(gòu)原理剖析,需要的朋友可以參考下2022-11-11
create-react-app使用antd按需加載的樣式無效問題的解決
這篇文章主要介紹了create-react-app使用antd按需加載的樣式無效問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
React中useTransition鉤子函數(shù)的使用詳解
React?18的推出標志著React并發(fā)特性的正式到來,其中useTransition鉤子函數(shù)是一個重要的新增功能,下面我們就來學(xué)習(xí)一下useTransition鉤子函數(shù)的具體使用吧2024-02-02
這篇文章主要介紹了React之useEffect缺少依賴警告問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Context提供了一個無需為每層組件手動添加props，就能在組件樹間進行數(shù)據(jù)傳遞的方法。在一個典型的?React?應(yīng)用中，數(shù)據(jù)是通過props屬性自上而下（由父及子）進行傳遞的，但這種做法對于某些類型的屬性而言是極其繁瑣的2022-12-12
這篇文章主要介紹了React觸發(fā)render的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了React和Vue實現(xiàn)文件下載進度條，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
React利用scheduler思想實現(xiàn)任務(wù)的打斷與恢復(fù)
這篇文章主要為大家詳細介紹了React如何利用scheduler思想實現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下2024-03-03
React中自定義組件的重要性在于它們提供了代碼重用、降低耦合性、提升可維護性、更好的團隊協(xié)作、靈活性和易于測試和調(diào)試等好處,從而提高了開發(fā)效率和質(zhì)量,這篇文章主要介紹了React 封裝自定義組件,需要的朋友可以參考下2023-12-12