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

 更新时间:2020年10月29日 10:13:12   作者:fang_ze_zhang  
这篇文章主要介绍了antd-日历组件,前后禁止选择,只能选中间一部分的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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>
   );
  }
 }

页面初始效果:

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

经过多次尝试,比如:

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

尝试 react-addons-update ,排除,

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

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

……

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

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

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

相关文章

  • 图文详解keep-alive如何清除缓存

    图文详解keep-alive如何清除缓存

    vue项目中常常会用到keepalive来作缓存,在应付基本要求上能够说很是方便,可是遇到同一个页面,根据条件不一样,分别缓存或者不缓存,就有些麻烦了,这篇文章主要给大家介绍了关于keep-alive如何清除缓存的相关资料,需要的朋友可以参考下
    2021-08-08
  • vue3.2 Composition API项目依赖升级

    vue3.2 Composition API项目依赖升级

    这篇文章主要为大家介绍了vue3.2 Composition API项目依赖升级示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vuejs使用axios异步访问时用get和post的实例讲解

    vuejs使用axios异步访问时用get和post的实例讲解

    今天小编就为大家分享一篇vuejs使用axios异步访问时用get和post的实例讲解,具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 关于在vue中实现过渡动画的代码示例

    关于在vue中实现过渡动画的代码示例

    Vue是一款流行的前端框架,支持过渡动画的实现是其中的一项重要特性,在Vue中,使用过渡动画可以为用户提供更加友好的用户体验,下面我将为大家介绍一下子如何在Vue中实现过渡动画,需要的朋友可以参考下
    2023-06-06
  • vue拦截器Vue.http.interceptors.push使用详解

    vue拦截器Vue.http.interceptors.push使用详解

    这篇文章主要为大家详细介绍了vue拦截器Vue.http.interceptors.push的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue基础之模板和过滤器用法实例分析

    vue基础之模板和过滤器用法实例分析

    这篇文章主要介绍了vue基础之模板和过滤器用法,结合实例形式分析了vue模板与过滤器的功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-03-03
  • 解决vant title-active-color与title-inactive-color不生效问题

    解决vant title-active-color与title-inactive-color不生效问题

    这篇文章主要介绍了解决vant title-active-color与title-inactive-color不生效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3发送验证码倒计时功能的实现(防止连点、封装复用)

    vue3发送验证码倒计时功能的实现(防止连点、封装复用)

    这篇文章主要介绍了vue3发送验证码倒计时功能的实现(防止连点、封装复用),实现思路是点击发送验证码,验证码倒计时,校验手机号是否正常等一系列操作,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • vue作用域插槽详解、slot、v-slot、slot-scope

    vue作用域插槽详解、slot、v-slot、slot-scope

    这篇文章主要介绍了vue作用域插槽详解、slot、v-slot、slot-scope,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue中异步函数async和await的用法说明

    vue中异步函数async和await的用法说明

    这篇文章主要介绍了vue中异步函数async和await的用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论