React踩坑之a(chǎn)ntd輸入框rules中的required=true問(wèn)題
React antd輸入框rules中的required=true
你可能跟我一樣，輸入框必輸校驗(yàn)的設(shè)置：required=true，下面是一個(gè)查詢(xún)列表中的過(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.memo 和 useMemo 的使用問(wèn)題小結(jié)
隨著代碼的增加，每次的狀態(tài)改變，頁(yè)面進(jìn)行一次 reRender ，這將產(chǎn)生很多不必要的 reRender 不僅浪費(fèi)性能，從而導(dǎo)致頁(yè)面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問(wèn)題小結(jié),需要的朋友可以參考下2022-11-11
react組件中過(guò)渡動(dòng)畫(huà)的問(wèn)題解決
這篇文章主要為大家介紹了react組件中過(guò)渡動(dòng)畫(huà)的問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了React事件處理的機(jī)制及原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext
這篇文章主要介紹了react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext,其實(shí)與vue中的ref和reactive一樣，通過(guò)useState獲取到的數(shù)據(jù)可以實(shí)現(xiàn)組件視圖實(shí)時(shí)交互，而普通定義的數(shù)據(jù)僅僅在業(yè)務(wù)中使用，需要的朋友可以參考下2022-11-11
React之錯(cuò)誤邊界 Error Boundaries示例詳解
這篇文章主要為大家介紹了React之錯(cuò)誤邊界Error Boundaries示例教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了在create-react-app中使用sass的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
react的渲染機(jī)制是非常獨(dú)特的,有別于 Vue 框架的渲染次數(shù)的優(yōu)化計(jì)算,React 很久以來(lái)就有PureComponent、shouldUpdate,本文小編給大家介紹了React渲染的優(yōu)化方案,需要的朋友可以參考下2024-08-08
react循環(huán)數(shù)據(jù)(列表)的實(shí)現(xiàn)
這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家介紹了React源碼調(diào)試方式實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能
這篇文章主要介紹了react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能,大概思路是用一個(gè)div包裹echarts, 然后在echarts的同級(jí)新建一個(gè)div用來(lái)用來(lái)模擬真實(shí)tooltip，通過(guò)鼠標(biāo)移入移出事件控制真實(shí)tooltip的顯示與隱藏，需要的朋友可以參考下2023-05-05