欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問題

 更新時(shí)間:2020年10月24日 11:14:57   作者:檸檬不萌只是酸i  
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧

有兩個(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詳解

    這篇文章主要介紹了vue-cli3 打包優(yōu)化之 splitchunks的相關(guān)知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • vuejs中父子組件之間通信方法實(shí)例詳解

    vuejs中父子組件之間通信方法實(shí)例詳解

    這篇文章主要介紹了vuejs中父子組件之間通信方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js父組件向子組件傳遞消息以及子組件向父組件傳遞消息具體操作實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2020-01-01
  • vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解

    vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解

    這篇文章主要為大家介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)預(yù)覽視頻封面組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • 一文教你學(xué)會(huì)在Vue3中自定義指令

    一文教你學(xué)會(huì)在Vue3中自定義指令

    這篇文章主要為大家詳細(xì)介紹一下如何在Vue3中實(shí)現(xiàn)自定義指令,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的同學(xué)可以參考一下
    2022-07-07
  • vue中記錄滾動(dòng)條位置的兩種方法

    vue中記錄滾動(dòng)條位置的兩種方法

    最近用 Vue 做移動(dòng)端頁(yè)面遇到一個(gè)問題,需要記住滾動(dòng)條的位置,所以下面這篇文章主要給大家介紹了關(guān)于vue中記錄滾動(dòng)條位置的兩種方法,文中給出了詳細(xì)的實(shí)例,需要的朋友可以參考下
    2023-01-01
  • Vue CL3 配置路徑別名詳解

    Vue CL3 配置路徑別名詳解

    這篇文章主要介紹了Vue CL3 配置路徑別名詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能(實(shí)例代碼)

    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)聽的方式

    深入探討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中proxy代理的用法(解決跨域問題)

    vue中proxy代理的用法(解決跨域問題)

    這篇文章主要介紹了vue中的proxy代理的用法(解決跨域問題),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue結(jié)合Element-Plus封裝遞歸組件實(shí)現(xiàn)目錄示例

    Vue結(jié)合Element-Plus封裝遞歸組件實(shí)現(xiàn)目錄示例

    本文主要介紹了Vue結(jié)合Element-Plus封裝遞歸組件實(shí)現(xiàn)目錄示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04

最新評(píng)論