明确日期的奇怪行为

Question

我正在使用 react 17.0.2 和 next 12.0.0，并使用 react-date-range (https://www.npmjs.com/package/react-date-range)

我已经设置了一个默认日期，当组件被安装时，一切都很好。你可以在这里看到我的例子：https://codesandbox.io/s/react-17-forked-6p10ss?file=/src/App.js

重现错误的步骤：

加载 CodeSandbox 时，您可以看到日历工作正常。
我只选择“startDate”，不选择“endDate”
现在我点击“清除”按钮。（希望日历returns恢复到初始状态）
如果我选择任何一天，它将被选为“endDate”，“startDate”现在被选在第一个启用的日期。

有谁知道我什么时候出现这种情况？

我希望当我清除日期时，没有选择任何日期。如果我同时选择开始和结束日期，则不会发生此错误。

Answer 1

您应该创建一个状态来控制 focusedRange 选项。

const [focusedRange, setFocusedRange] = useState([0, 0]);

const handleClear = () => {
    setState(initialDates);
    setFocusedRange([0, 0]);
  };

<DateRangePicker
   focusedRange={focusedRange}
   onRangeFocusChange={setFocusedRange}
   ...

当您 select startDate 时，DateRangePicker 在内部将 focusRange 设置为 [0,1]。因此，您还需要在单击清除按钮时重置该值。在本例中为默认值 [0,0].

你可以多看看这个信息here。

明确日期的奇怪行为

Weird behavior on clear dates

reactjs

next.js