解决Antd 里面的select 选择框联动触发的问题

 更新时间:2020年10月24日 11:14:57   作者:柠檬不萌只是酸i  
这篇文章主要介绍了解决Antd 里面的select 选择框联动触发的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

有两个 select框,且这俩select框是关联的,触发select1,select2里面才会有值。

但是现在的问题是这样的:

触发select1,触发select2,再触发select1,此时select2里面的值变成了上次一选中的value 值,而不会被清空。

解决办法:

使用Select 里面的value属性,来进行清空

<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天转换成ms
 const selectV = selectDate.valueOf();
 const currenV = current.valueOf();
 return (calcMinus(currenV, offsetV) > selectV || calcAdd(currenV, offsetV) < selectV) ? true : false;
 }

 /* 选择任务时间变化 */
 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 选择框联动触发的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3优雅的实现跨组件通信的常用方法总结

    Vue3优雅的实现跨组件通信的常用方法总结

    开发中经常会遇到跨组件通信的场景,props 逐层传递的方法实在是太不优雅了,所以今天总结下可以更加简单的跨组件通信的一些方法,文中通过代码实例讲解的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue使用Element el-upload 组件踩坑记

    vue使用Element el-upload 组件踩坑记

    这篇文章主要介绍了vue使用Element el-upload 组件的相关知识,在研究学习基本使用的过程中遇到很多问题,今天特此把问题记录分享到脚本之家平台,需要的朋友可以参考下
    2021-09-09
  • vue项目使用luckyexcel预览excel表格功能(心路历程)

    vue项目使用luckyexcel预览excel表格功能(心路历程)

    这篇文章主要介绍了vue项目使用luckyexcel预览excel表格,我总共尝试了2种方法预览excel,均可实现,还发现一种方法可以实现,需要后端配合,叫做KKfileview,本文给大家介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • Vue中如何避免props验证失败问题

    Vue中如何避免props验证失败问题

    本文将探讨 props 验证失败的常见原因,并提供解决方法,帮助开发者在 Vue 组件开发中避免这些问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • 十分钟带你快速上手Vue3过渡动画

    十分钟带你快速上手Vue3过渡动画

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于如何快速上手Vue3过渡动画的相关资料,需要的朋友可以参考下
    2022-02-02
  • vue实现单一筛选、删除筛选条件

    vue实现单一筛选、删除筛选条件

    这篇文章主要为大家详细介绍了vue实现单一筛选、删除筛选条件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Vue双向数据绑定与响应式原理深入探究

    Vue双向数据绑定与响应式原理深入探究

    本节介绍双向数据绑定以及响应式的原理,回答了双向数据绑定和数据响应式是否相同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-08-08
  • Vue实现二维码数组的全选与反选功能

    Vue实现二维码数组的全选与反选功能

    在开发Web应用程序时,表格数据的展示和操作是非常常见的需求之一,特别是在处理表格中的复选框选择时,我们经常需要实现全选、反选等功能,这篇文章将带你深入了解如何在Vue.js中实现对二维数组数据的全选和反选功能,需要的朋友可以参考下
    2024-09-09
  • vue2与vue3双向数据绑定的区别说明

    vue2与vue3双向数据绑定的区别说明

    这篇文章主要介绍了vue2与vue3双向数据绑定的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue 数组和对象不能直接赋值情况和解决方法(推荐)

    vue 数组和对象不能直接赋值情况和解决方法(推荐)

    这篇文章主要介绍了vue 数组和对象不能直接赋值情况和解决方法,需要的朋友可以参考下
    2017-10-10

最新评论