解决antd日期选择组件,添加value就无法点击下一年和下一月问题

对于 Ant Design 的日期选择组件 DatePicker，如果我们在使用时添加了 value 属性，会发现无法点击下一年和下一月。这是因为添加了 value 属性后，Ant Design 会把组件的选中日期固定为这个值，并禁用掉下一年和下一月的按钮。解决这个问题的方法非常简单，在代码中添加一个叫做 allowClear 的属性，并将该属性的值设为 true 即可。

下面是一个示例：

import { useState } from 'react';
import { DatePicker } from 'antd';

function App() {
  const [value, setValue] = useState(null);

  function onChange(date, dateString) {
    setValue(date);
  }

  function onClear() {
    setValue(null);
  }

  return (
    <DatePicker
      value={value}
      onChange={onChange}
      allowClear={true} // 添加 allowClear 属性
      onClear={onClear}
    />
  );
}

以上示例中，我们添加了一个 allowClear 属性，并将其值设为 true。这样，我们就可以在选中一个日期后，再次点击下一年或下一月的按钮来改变选中的日期。

下面再看一个示例。假设我们的初始值为 2022 年 1 月 1 日，我们可以通过以下代码来实现：

import { useState } from 'react';
import { DatePicker } from 'antd';
import moment from 'moment'; // 需要安装 moment 库

function App() {
  const [value, setValue] = useState(moment('2022-01-01', 'YYYY-MM-DD'));

  function onChange(date, dateString) {
    setValue(date);
  }

  return (
    <DatePicker
      value={value}
      onChange={onChange}
      allowClear={true}
    />
  );
}

以上示例中，我们使用 moment 库来创建一个初始值为 2022 年 1 月 1 日的 moment 对象，并将其作为 value 属性的值。这样，我们就可以在界面上看到初始值，并且可以通过点击下一年和下一月的按钮来改变选中的日期。