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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
vue--vuex详解
Apr 15 Javascript
jquery图片预览插件实现方法详解
Jul 18 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
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
再谈JavaScript线程
2015/07/10 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
wxPython窗口中文乱码解决方法
2014/10/11 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
没编程基础可以学python吗
2020/06/17 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
C#面试常见问题
2013/02/25 面试题
电子商务毕业生求职信
2013/11/10 职场文书
自荐信怎么写好
2013/11/11 职场文书
团组织关系介绍信
2014/01/12 职场文书
和谐社区口号
2014/06/19 职场文书
个人廉洁自律总结
2015/03/06 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫