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