React中关于antd的RangePicker自定义清空

最新推荐文章于 2024-12-12 12:04:47 发布

原创最新推荐文章于 2024-12-12 12:04:47 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

本文介绍如何通过Reacthooks实现RangePicker组件的自定义清空功能，包括处理onChange事件、value类型以及判断是否为空值的操作。

虽然这边写的是RangePicker，但是其他日期等同理

官方文档没有写出自定义清空时间的函数，但是我们可以通过hooks对onChange和value来进行对这个组件的值进行控制

需要注意的点是关于范围的时间组件中

value的类型为 value={【moment（时间戳）,moment(时间戳)】}

并且在onChange进行对value的赋值的同时，需要通过onchange获取的参数是否为null，来判断是否是点击清空按钮而执行的函数

在清空值的时候需要把value设置成为【undefind，undefind】，并且通过判断设置value是否为undefind还是时间戳组件，如果没有判断，就算你清空了，moment（undefind）为当前时间，这种情况下清空之后就会变成当前时间而不是空值

👇上代码

           //setSelectedKeys为hooks           
              <RangePicker
              size={'small'}
              format="YYYY-MM-DD"
              value={
                selectedKeys[0] ? [moment(selectedKeys[0]), moment(selectedKeys[1])] : selectedKeys
              }
              // key={[moment(selectedKeys[0]), moment(selectedKeys[1])]}
              onChange={(e, x) => {
                if (e === null) {
                  setSelectedKeys([undefined, undefined]);
                } else {
                  setSelectedKeys([moment(e?.[0]).valueOf(), moment(e?.[1]).valueOf()]);
                }
              }}
            />
            <Button
              onClick={() => {
                setSelectedKeys([undefined, undefined]);
              }}
            >
              重置
            </Button>