antd-日历组件,前后禁止选择,只能选中间一部分的实例


Posted in Javascript onOctober 29, 2020

antd-日历组件,前后禁止选择,只能选中间一部分:

dateDisabledDate(current) { // 需求有效期的禁止选择时间
  if (this.state.sailingtimeValue != null && this.state.sailingtimeValue.length != 0) {
   return current && (current < moment().subtract(1, 'd').add(1, "M") || current > moment(this.state.sailingtimeValue[0]).subtract(1, 'd'));
  } else {
   return current && current < moment().subtract(1, 'd').add(1, "M")
  }
 }

补充知识:关于 Ant Design 中 Input 组件的 defaultValue 属性的一个小问题

记录关于一次 Ant Design 使用时遇到的一个问题,defaultValue属性赋值,页面交互操作处理数据之后页面数据未更新(未按照预期显示)。

class Component extends React.Component{
  constructor(props) {
   super(props);
   this.state = {
    list: [
     {name: 111},
     {name: 222},
     {name: 333},
    ]
   };
  }

  deal(index) {
   let {list} = this.state;
   list.splice(index, 1);
   this.setState({
    list
   });
  }

  render() {
   let {list} = this.state;

   return (
    <span>
    <Button type="danger" onClick={this.deal.bind(this, index)}>删除</Button>
    {
     list.map((item, index) => {
      <Row>
       <Col span={24}>
        <Item {...formItemLayout} label=" " colon={false}>
         <Input defaultValue={item.name}
           onChange={event => {this.nameChange(event, index)}} />
        </Item>
       </Col>
      </Row>
     })
    }
    </span>
   );
  }
 }

页面初始效果:

antd-日历组件,前后禁止选择,只能选中间一部分的实例

经过 deal 方法处理之后的效果:

antd-日历组件,前后禁止选择,只能选中间一部分的实例

经过多次尝试,比如:

怀疑 splice 出了问题,因为工程中 splice 有很多库的处理,经过各种尝试打印 splice 处理之后的数据结果,排除 splice 因素

antd-日历组件,前后禁止选择,只能选中间一部分的实例

尝试 react-addons-update ,排除,

在 render 函数中打印结果,发现数据更新过了,费解…

在 render 中,通过 {item.name} 检测数据变化,确定 span 显示的数据已经发生变化,最终确定结果:数据已经更新,Input 显示存在问题!!!

……

经过一段时间的思考,确认数据已经更新,只是在显示的时候出了问题,返回去查 antD 的 Input 文档,发现了:

antd-日历组件,前后禁止选择,只能选中间一部分的实例

defaultValue 与 value 两个相似的属性,于是尝试着 value 替代 defaultValue 最终解决问题。

以上这篇antd-日历组件,前后禁止选择,只能选中间一部分的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
绑定回车enter事件代码
May 18 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
jQuery表单验证之密码确认
May 22 jQuery
React Native验证码倒计时工具类分享
Oct 24 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 #Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 #Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 #Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 #Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 #Javascript
解决ant Design Search无法输入内容的问题
Oct 29 #Javascript
js实现随机圆与矩形功能
Oct 29 #Javascript
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
在模板页面的js使用办法
2010/04/01 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
JS前端加密算法示例
2016/12/22 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
Python切换pip安装源的方法详解
2016/11/18 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python pymongo模块用法示例
2018/03/31 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
农村党员一句话承诺
2014/05/30 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
出生证明范本
2015/06/15 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
Python绘画好看的星空图
2022/03/17 Python