解决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 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 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应用JSON技巧讲解
2013/02/03 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[01:46]新英雄登场
2019/09/10 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python探索之自定义实现线程池
2017/10/27 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
Python socket服务常用操作代码实例
2020/06/22 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
会计专业应届生求职信
2013/11/24 职场文书
机械操作工岗位职责
2014/08/08 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
手机被没收的检讨书
2014/10/04 职场文书
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers