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

觸發(fā)select1,觸發(fā)select2,再觸發(fā)select1,此時(shí)select2里面的值變成了上次一選中的value 值,而不會(huì)被清空。
解決辦法:
使用Select 里面的value屬性,來(lái)進(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 != '請(qǐng)選擇名稱'){
setPaperId('請(qǐng)選擇名稱');
}
setPackagedPapersId(value)
paperListFn(value)
}
補(bǔ)充知識(shí):antd RangePicker限制選擇時(shí)間跨度是30天
我就廢話不多說了,大家還是直接看代碼吧~
const { RangePicker } = DatePicker;
const [selectDate, setSelectDate] = useState(null);
/* 控制下單時(shí)間選擇范圍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ù)時(shí)間變化 */
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)動(dòng)觸發(fā)的問題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli3 打包優(yōu)化之 splitchunks詳解
這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能(實(shí)例代碼)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-04-04
深入探討Vue3實(shí)現(xiàn)多數(shù)據(jù)變化監(jiān)聽的方式
隨著 Vue 3 的發(fā)布,框架帶來(lái)了更多的新特性和增強(qiáng),其中之一就是 watch 函數(shù)的升級(jí),這一改進(jìn)使得多個(gè)數(shù)據(jù)的變化偵聽更加優(yōu)雅和靈活,本文將深入探討 Vue 3 中的 watch 函數(shù),以及如何以更加優(yōu)雅的方式實(shí)現(xiàn)對(duì)多個(gè)數(shù)據(jù)變化的監(jiān)聽2023-08-08
Vue結(jié)合Element-Plus封裝遞歸組件實(shí)現(xiàn)目錄示例
本文主要介紹了Vue結(jié)合Element-Plus封裝遞歸組件實(shí)現(xiàn)目錄示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

