解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問(wèn)題
更新時(shí)間：2020年10月24日 11:14:57 作者：檸檬不萌只是酸i
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
有兩個(gè) select框，且這倆select框是關(guān)聯(lián)的，觸發(fā)select1，select2里面才會(huì)有值。
但是現(xiàn)在的問(wè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天
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
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ā)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)
開(kāi)發(fā)中經(jīng)常會(huì)遇到跨組件通信的場(chǎng)景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡(jiǎn)單的跨組件通信的一些方法,文中通過(guò)代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue使用Element el-upload 組件的相關(guān)知識(shí)，在研究學(xué)習(xí)基本使用的過(guò)程中遇到很多問(wèn)題，今天特此把問(wèn)題記錄分享到腳本之家平臺(tái),需要的朋友可以參考下2021-09-09
vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項(xiàng)目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實(shí)現(xiàn),還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
本文將探討 props 驗(yàn)證失敗的常見(jiàn)原因,并提供解決方法,幫助開(kāi)發(fā)者在 Vue 組件開(kāi)發(fā)中避免這些問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
在開(kāi)發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過(guò)渡動(dòng)畫,可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何快速上手Vue3過(guò)渡動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)單一篩選、刪除篩選條件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應(yīng)式的原理，回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應(yīng)式是否相同，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-08-08
Vue實(shí)現(xiàn)二維碼數(shù)組的全選與反選功能
在開(kāi)發(fā)Web應(yīng)用程序時(shí),表格數(shù)據(jù)的展示和操作是非常常見(jiàn)的需求之一,特別是在處理表格中的復(fù)選框選擇時(shí),我們經(jīng)常需要實(shí)現(xiàn)全選、反選等功能,這篇文章將帶你深入了解如何在Vue.js中實(shí)現(xiàn)對(duì)二維數(shù)組數(shù)據(jù)的全選和反選功能,需要的朋友可以參考下2024-09-09
vue2與vue3雙向數(shù)據(jù)綁定的區(qū)別說(shuō)明
這篇文章主要介紹了vue2與vue3雙向數(shù)據(jù)綁定的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 數(shù)組和對(duì)象不能直接賦值情況和解決方法(推薦)
這篇文章主要介紹了vue 數(shù)組和對(duì)象不能直接賦值情況和解決方法,需要的朋友可以參考下2017-10-10