antd RangePicker组件结合Form每次打开（onOpenChange）并未清除组件中的日期、关闭后也不能正确赋值

1.onOpenChange打开后不能清空组件中的日期

原因：虽然RangePicker中的值清空，但是form中RangePicker的值未清空

解决：form.setFieldsValue({ date: [null, null] });

2.onOpenChange关闭时，赋不上最新的值，导致每次关闭后都赋上一次的value值；

解决：form.setFieldsValue({ date: value }); 

方法一：const date = form.getFieldValue('date');
             if (!date || !date[0])  form.setFieldsValue({ date: value });

方法二：setTimeout(()=>{

                form.setFieldsValue({ date: value });

              },1)

链接：选择不超过七天的范围 - antd@4.24.8 - StackBlitz

import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { DatePicker, Form } from 'antd';
import { Moment } from 'moment';

const { RangePicker } = DatePicker;

const App: React.FC = () => {
  const [dates, setDates] = useState(null);
  const [value, setValue] = useState(null);
  const [form] = Form.useForm();

  const disabledDate = (current: Moment) => {
    if (!dates) {
      return false;
    }
    const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
    const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
    return !!tooEarly || !!tooLate;
  };

  const onOpenChange = (open: boolean) => {
    if (open) {
      setDates([null, null]);
      form.setFieldsValue({ date: [null, null] });
    } else {
      setDates(null);
      const date = form.getFieldValue('date');
      if (!date || !date[0]) form.setFieldsValue({ date: value });
    }
  };

  return (
    <Form form={form} name="date">
      <Form.Item name="date" label="时间" required>
        <RangePicker
          value={dates || value}
          disabledDate={disabledDate}
          onCalendarChange={(val) => setDates(val)}
          onChange={(val) => setValue(val)}
          onOpenChange={onOpenChange}
        />
      </Form.Item>
    </Form>
  );
};

export default App;