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


Posted in Javascript onOctober 24, 2020

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

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

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

触发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 选择框联动触发的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js继承的实现代码
Aug 05 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
jQuery DOM操作实例
Mar 05 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JS面向对象编程详解
Mar 06 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
JS中判断字符串存在和非空的方法
Sep 12 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 #Javascript
jquery插件懒加载的示例
Oct 24 #jQuery
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 #Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 #Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 #Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 #Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 #Javascript
You might like
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
javascript之bind使用介绍
2011/10/09 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
Python生成不重复随机值的方法
2015/05/11 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python实现抖音点赞功能
2019/04/07 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
教师考核材料
2014/05/21 职场文书
交通安全横幅标语
2014/10/07 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
模范班主任事迹材料
2014/12/17 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
旗帜观后感
2015/06/08 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
Python Numpy库的超详细教程
2022/04/06 Python