antd RangePicker清空日期时报错

可能原因:

  1. 清空操作没有按照 RangePicker 组件的要求来进行,比如直接设置了 value 为 null 或 []。

  2. 使用了 RangePicker 的 onChange 事件处理函数不正确,没有正确更新组件的状态。

解决方法:

  1. 确保使用 RangePicker 组件的 value 属性时,始终传递数组,即使要清空日期也要传递 [],而不是 null。

  2. 在 onChange 事件处理函数中,当用户清空日期时,更新 value 为 []。

javascript 复制代码
import React, { useState } from 'react';
import { DatePicker } from 'antd';
 
const { RangePicker } = DatePicker;
 
const MyComponent = () => {
  const [dateRange, setDateRange] = useState([]); // 初始化为空数组
 
  const handleDateChange = (dates, dateStrings) => {
    // 当用户清空日期时,dates 和 dateStrings 都会是 undefined
    if (!dates) {
      setDateRange([]); // 清空日期
    } else {
      setDateRange(dates); // 更新日期范围
    }
  };
 
  return (
    <RangePicker value={dateRange} onChange={handleDateChange} />
  );
};
 
export default MyComponent;
复制代码
相关推荐
yyuuuzz6 小时前
云服务器部署 web 项目的进程常驻记录
运维·服务器·前端·阿里云·云计算·aws
持敬chijing6 小时前
白盒测试与代码审计-JS 数据逆向
javascript·网络·安全·web安全·网络安全·网络攻击模型·安全威胁分析
IT_陈寒6 小时前
一文搞懂React的核心概念
前端·人工智能·后端
“AI国潮设计-小江”6 小时前
《【AIGC实战】Python+SDXL批量生成“猫咪英歌舞蛋挞”IP,附保持角色一致性的代码逻辑》
开发语言·人工智能·python·prompt·aigc
坤坤子吖6 小时前
Linux 线程概念与控制——线程创建、退出与等待
linux·开发语言·c++·笔记·学习
薛一半6 小时前
Redux实战:组件状态管理全解析
开发语言·前端·javascript·react.js
weixin_307779136 小时前
C++代码实现MATLAB中的fitnlm函数功能
开发语言·c++·算法·matlab
风骏时光牛马7 小时前
功能模块性能测试用例验证
前端
对空六课8 小时前
两个统计平台数据不同:用同一时间窗和事件样本做差异定位
大数据·前端·网络·数据库