解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題
有兩個 select框,且這倆select框是關(guān)聯(lián)的,觸發(fā)select1,select2里面才會有值。
但是現(xiàn)在的問題是這樣的:

觸發(fā)select1,觸發(fā)select2,再觸發(fā)select1,此時select2里面的值變成了上次一選中的value 值,而不會被清空。
解決辦法:
使用Select 里面的value屬性,來進(jìn)行清空
<Form style={{padding:'20px','boxSizing':'border-box'}}>
<FormItem label="套卷名稱" {...formItemLayout}>
<Select defaultValue={packagedPapersId} onChange={selectPackage}>
{
packagedPaperList.map((item,idx)=>(
<Option value={item.packagedPapersId} key={idx}>{item.packagedPapersName}</Option>
))
}
</Select>
</FormItem>
<FormItem label="試卷名稱" {...formItemLayout}>
<Select defaultValue={paperId} value={paperId} onChange={(val,item)=>selectPaper(val,item)}>
{
paperList.map((item,idx)=>(
<Option value={item.paperId} key={idx}>{item.paperName}</Option>
))
}
</Select>
</FormItem>
</Form>
// select1里面的判斷
const selectPackage = (value) =>{
if(paperId != '請選擇名稱'){
setPaperId('請選擇名稱');
}
setPackagedPapersId(value)
paperListFn(value)
}
補充知識:antd RangePicker限制選擇時間跨度是30天
我就廢話不多說了,大家還是直接看代碼吧~
const { RangePicker } = DatePicker;
const [selectDate, setSelectDate] = useState(null);
/* 控制下單時間選擇范圍30天 */
const disabledTaskDate = (current) => {
if (!current || !selectDate) return false;
const offsetV = 2592000000; //30天轉(zhuǎn)換成ms
const selectV = selectDate.valueOf();
const currenV = current.valueOf();
return (calcMinus(currenV, offsetV) > selectV || calcAdd(currenV, offsetV) < selectV) ? true : false;
}
/* 選擇任務(wù)時間變化 */
const onDateChange = (dates) => {
if (!dates || !dates.length) return;
setSelectDate(dates[0]);
}
const onDateOpenChange = () => {
setSelectDate(null);
}
<RangePicker
showTime={{ format: 'HH:mm:ss' }}
disabledDate={disabledTaskDate}
onCalendarChange={onDateChange}
onOpenChange={onDateOpenChange}
/>
以上這篇解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3優(yōu)雅的實現(xiàn)跨組件通信的常用方法總結(jié)
開發(fā)中經(jīng)常會遇到跨組件通信的場景,props?逐層傳遞的方法實在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡單的跨組件通信的一些方法,文中通過代碼實例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue項目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實現(xiàn),還發(fā)現(xiàn)一種方法可以實現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應(yīng)式的原理,回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應(yīng)式是否相同,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-08-08
vue2與vue3雙向數(shù)據(jù)綁定的區(qū)別說明
這篇文章主要介紹了vue2與vue3雙向數(shù)據(jù)綁定的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
vue 數(shù)組和對象不能直接賦值情況和解決方法(推薦)
這篇文章主要介紹了vue 數(shù)組和對象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10

