React 中重置表单后日期选择器默认值丢失的解决方案

在使用 Ant Design 的 Form 组件时，重置表单后日期选择器默认值丢失是一个常见的问题。

以下代码展示了重置按钮无法恢复日期选择器初始时间的问题：

const [radioValue, setRadioValue] = useState('AML');
const sorNorDeparment = async (valueParment: string) => {
    setLoading(true);
    const values = form.getFieldsValue();
    console.log(moment(values.startTime).format('YYYY-MM'), 87);

    try {
      const { data } = await getSocNormMonthList({
        queryType: '1',
        socNormDepartmentEnum: valueParment,
        startTime: moment(values.startTime).format('YYYY-MM'),
        endTime: moment(values.endTime).format('YYYY-MM'),
      });
      setLoading(false);
      const monthData = data;
      const tmpCol = monthData[0]?.normMonthNodeList?.map((item: any) => {
        return {
          title: item.monthDate,
          dataIndex: item.monthDate,
          align: 'center',
          hideInSearch: true,
          width: 50,
        };
      });

      const arr: any[] = [];
      monthData.map((item: any) => {
        item.normMonthNodeList.forEach((ite: any) => {
          item[ite.monthDate] = ite.monthNormNumber;
        });
        arr.push(item);
      });
      setDeparmentData(arr);
      setCVolumnsMon([...columns, ...tmpCol]);

      return {
        success: true,
      };
    } catch (error) {
      return { success: false };
    }
  };
const handleResent = () => {
    sorNorDeparment('AML');
    form?.resetFields();
    setRadioValue('AML');

};
<Form.Item
                    label='开始时间'
                    name='startTime'
                    initialValue={moment().subtract(11, 'months')}
                  >
                    <DatePicker style={{ width: '100%' }} picker='month' format={'YYYY-MM'} />
                  </Form.Item>
                </Col>
<Button onClick={handleResent} style={{ marginLeft: '20px' }}>
                      重置
                    </Button>

问题分析：

根据代码，重置按钮只是通过调用sorNorDeparment函数将部门设置为AML，并使用form.resetFields方法重置表单字段。它并没有直接重置日期选择器的默认值。

解决方案：

在调用sorNorDeparment函数之前调用form.setFieldsValue({ startTime: moment().subtract(11, 'months') })来设置日期选择器的默认值。

const handleResent = () => {
    form.setFieldsValue({ startTime: moment().subtract(11, 'months') });
    sorNorDeparment('AML');
    form?.resetFields();
    setRadioValue('AML');

};

代码示例：

import React, { useState } from 'react';
import { Form, DatePicker, Button, Col } from 'antd';
import moment from 'moment';

const MyComponent = () => {
  const [radioValue, setRadioValue] = useState('AML');
  const [form] = Form.useForm();

  // 其他代码...

  const handleResent = () => {
    form.setFieldsValue({ startTime: moment().subtract(11, 'months') }); // 设置默认值
    sorNorDeparment('AML');
    form?.resetFields();
    setRadioValue('AML');
  };

  return (
    <Form form={form} layout='vertical' onFinish={onFinish} initialValues={{ startTime: moment().subtract(11, 'months') }}>
      <Col span={12}>
        <Form.Item
          label='开始时间'
          name='startTime'
          initialValue={moment().subtract(11, 'months')}
        >
          <DatePicker style={{ width: '100%' }} picker='month' format={'YYYY-MM'} />
        </Form.Item>
      </Col>
      <Button onClick={handleResent} style={{ marginLeft: '20px' }}>
        重置
      </Button>
    </Form>
  );
};

export default MyComponent;

注意：

form.setFieldsValue 方法用于设置表单字段的值，包括日期选择器的默认值。
在调用sorNorDeparment函数之前设置默认值，以确保重置表单后日期选择器能够正确显示初始时间。
使用moment().subtract(11, 'months') 获取当前时间往前推 11 个月的日期，作为日期选择器的默认值。
您可以根据自己的需求调整时间范围和格式。