在蚂蚁设计中选择日期后无法清除范围选择器答案

【问题标题】：Unable to clear range picker after date is selected in ant design在蚂蚁设计中选择日期后无法清除范围选择器
【发布时间】：2020-05-09 01:41:24
【问题描述】：

用户选择日期后，无法从 ant design 中清除日期范围选择器。

这是我的代码：

import React, { useState } from "react";
import { DatePicker } from "antd";
import moment from "moment";

const { RangePicker } = DatePicker;
import "antd/dist/antd.css";

const DataTable = props => {
  const [dateRange, changeDateRange] = useState(null);

  const onDateRangeChange = dateRange => {
    if (dateRange) {
      changeDateRange(returnMomentDateRange(dateRange[0], dateRange[1]));
    }
  };

  const returnMomentDateRange = (start, finish) => {
    return [moment(start, "YYYY-MM-DD"), moment(finish, "YYYY-MM-DD")];
  };

  return (
    <RangePicker
      allowClear={true}
      size="small"
      picker="date"
      value={dateRange !== "" ? dateRange : ""}
      onChange={onDateRangeChange}
    />
  );
};

export default DataTable;

似乎一旦我添加了一个 value 道具，我就不能再使用“x”来清除了。

这是我设置的代码框。

https://codesandbox.io/s/wispy-rgb-xidbz?file=/src/App.js:0-754

【问题讨论】：

标签： reactjs antd

【解决方案1】：

在您的方法 onDateRangeChange 中使用以下代码，

if (dateRange) {
   changeDateRange(returnMomentDateRange(dateRange[0], dateRange[1]));
} else {
   changeDateRange([]);
}

【讨论】：

非常接近。 null 不起作用，但空数组可以；如果你改变你的答案，我会接受。谢谢你的帮助。
@schoenbl null 对我有用，应该对你有用，因为 dateRange 的初始值也是 but。但是[ ] 空数组也可以，所以我改变了它。您可以接受答案。
你是对的；由于不同的原因它不起作用；我在本地环境中有一个稍微不同的版本。你可能应该把它改回来。很抱歉造成混乱，感谢您的帮助。