Question

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

这是我的代码：

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'清除了。

这是我设置的密码框。

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([]);
}

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

1 个答案: