使用 React-Hook-Form V7 在 DatePicker Antd 中设置默认值

Question

我试图设置从服务器获取数据时的默认值Datepicker，但它不起作用。按照此处的文档，我无法设置defaultValue道具，因为它仅用于第一次渲染。

我发现一个解决方案是创建一个状态并在Datepicker更改时更新该状态。但这似乎很愚蠢，因为它会重新渲染每次更新。请让我知道一个“更好的解决方案”或使用react-hook-form值的“状态”。这是我目前的“愚蠢的解决方案”：

import { DatePicker, Form } from "antd";
import moment, { Moment } from "moment";
import { useEffect, useState } from "react";
import {
  Controller,
  ControllerRenderProps,
  SubmitHandler,
  useForm,
} from "react-hook-form";

const UserList = () => {
  const [date, setDate] = useState<Moment | null>();
  const dateFormat = "YYYY-MM-DD";
  useEffect(() => {
    setDate(() => moment("1963-10-14T00:00:00"));
  }, []);

  const onChange = (date: Moment | null, dateString: string) => {
    console.log(date, dateString);
  };

  interface IForm {
    dob: string;
  }

  const {
    handleSubmit,
    formState: { errors },
    control,
    reset,
    getValues,
    watch,
  } = useForm<IForm>({
    // resolver: yupResolver(UserInfoSchema),
  });

  const dateWatch = watch("dob");

  const handleSubmitForm: SubmitHandler<IForm> = (data: IForm) => {
    console.log(data);
  };

  const onDatePickerChange = (
    date: moment.Moment | null,
    dateString: string,
    props: any
  ) => {
    console.log(dateWatch);
    setDate(date);
    props.field.onChange(dateString);
  };

  return (
    <>
      <Form onFinish={handleSubmit(handleSubmitForm)}>
        <Form.Item label={"label"}>
          <Controller
            control={control}
            name={"dob"}
            render={(props) => (
              <DatePicker
                onChange={(date, dateString) =>
                  onDatePickerChange(date, dateString, props)
                }
                value={date}                    
              />
            )}
          />
        </Form.Item>
      </Form>
    </>
  );
};

export default UserList;

Answer 1

您可以提供defaultValuesuseForm挂钩来设置默认值：

完整的例子，见评论：

import { DatePicker, Form } from "antd";
import moment from "moment";
import { Controller, SubmitHandler, useForm } from "react-hook-form";

// We usually define interface/type outside component
interface IForm {
  dob: string;
}

const UserList = () => {
  const { handleSubmit, control } = useForm<IForm>({
    defaultValues: {
      dob: "2021-01-01", // Default value here
    },
  });

  const handleSubmitForm: SubmitHandler<IForm> = (data: IForm) => {};

  return (
    <Form onFinish={handleSubmit(handleSubmitForm)}>
      <Form.Item label="Date of Birth">
        <Controller
          control={control}
          name="dob"
          render={(props) => (
            <DatePicker
              value={moment(props.field.value)} // DatePicker accepts a moment object
              onChange={(_, dateString) => {
                props.field.onChange(dateString); // No need of a state
              }}
            />
          )}
        />
      </Form.Item>
    </Form>
  );
};

编辑：

如果需要在初始渲染后设置值，请使用Reset，例如：

useEffect(() => {
  fetchMyData().then(() => {
    reset({
      dob: "2005-05-05", // Set another date
    });
  });
}, []);