解决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代码格式化和语法着色V2
Oct 14 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
js中数组的常用方法小结
Dec 30 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
vue.js input框之间赋值方法
Aug 24 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手册及PHP编程标准
2006/12/17 PHP
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
js里的prototype使用示例
2010/11/19 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
js实现打字小游戏
2019/12/17 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
Python and、or以及and-or语法总结
2015/04/14 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
高中生的自我评价
2014/03/04 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python