当前位置: 首页>编程语言>正文

antd datepicker失焦时候丢失选中的值问题

antd 最新版的datepicker,有个showTime的参数,可以连同时间一起选择


antd datepicker失焦时候丢失选中的值问题,第1张

遇到的问题:
必须要点确定才能保存下时间,正常使用习惯应该是点外边让它失去焦点的时候自动确定,现在点外边失去焦点的时候选中的值丢失了

解决过程:

  1. 发现按回车键,是可以触发保存的,想着在onBlur的时候模拟按下回车键,尝试一番后失败
    2.找源码看,如果源码里面有相关方法,可以用ref获取到并调用,发现只有focus和blur方法


    antd datepicker失焦时候丢失选中的值问题,第2张
  2. 拿到ref后仔细看,每一层json都找过去,根本找不到选中的值,失败告终
  3. 突然发现底层用的是 rc-picker
  4. 直接去rc-picker上找有没有多余的api,看他的写法,是可以透传一些文档之外的api过去的,那么如果找到了rc-picker上的其他api,也可以传入这个antd的datepicker中,是可以直接透传到底层的


    antd datepicker失焦时候丢失选中的值问题,第3张

6.rc-picker文档中找到了onSelect 方法,但是antd这边的date-picker文档上没写,源码里面也没暴露,没搜到

  1. 所以onSelect有效,并且我用的是Form组件,所以直接把getFieldDecorator的配置加上trigger: 'onSelect',直接解决问题
  2. 发现不能点删除的那个图标了,应该是value被受控了,但是onChange没有传入,所以应该是 onSelect和onChange 同时被Form传入的onChange 接管,所以封装一层, 然后把刚刚配置的trigger删了。
props => <DatePicker {...props} onSelect={props.onChange} />

https://www.xamrdz.com/lan/5a31994300.html

相关文章: