Невозможно очистить средство выбора диапазона после того, как в дизайне муравьев выбрана дата

Question

Невозможно очистить средство выбора диапазона дат из дизайна муравья после того, как пользователь выберет дату.

Это мой код:

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;

Кажется, что как только я добавлю опору значения, я не могу более длительная очистка с помощью символа 'x'.

Это настройка codeandbox I.

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

Answer 1

В вашем методе onDateRangeChange используйте следующий код,

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