解决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俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
JavaScript基本编码模式小结
May 23 Javascript
前端jquery部分很精彩
May 03 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
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 中的类
2006/10/09 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
php自动加载机制的深入分析
2013/06/08 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
js实现楼层导航功能
2017/02/23 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python中urllib模块用法实例详解
2014/11/19 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
获取Django项目的全部url方法详解
2017/10/26 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python 元组的使用方法
2020/06/09 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
优秀部门获奖感言
2014/02/14 职场文书
环保公益策划方案
2014/08/15 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android