解决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 效率组装字符串 StringBuffer
Dec 23 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 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
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php支付宝APP支付功能
2020/07/29 PHP
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
详解如何运行vue项目
2019/04/15 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
基于Python实现文件大小输出
2016/01/11 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
如何一键升级Python所有包
2020/11/05 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
公司年终奖分配方案
2014/06/16 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
2014年测量员工作总结
2014/12/12 职场文书