如何使用 react-hook-form 为 KeyboardDatePicker 设置条件默认值？

Question

我有一个包含KeyboardDatePickerfrom的表单，当没有值传递给该字段的钩子时material UI，我希望它有一个空字符串值 ( "") 作为默认值useForm。

到目前为止，这是我的实现：

日期选择器输入字段：

                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <Controller
                        name="date"
                        control={control}
                        rules={{ required: true }}
                        defaultValue={getValues().date || ""}
                        as={
                            <KeyboardDatePicker
                                autoOk
                                inputVariant="outlined"
                                format="yyyy-MM-dd"
                                margin="normal"
                                id="date-picker-inline"
                                label="Date"
                                placeholder="yyyy-mm-dd"
                                required
                                error={!!errors.date}
                                helperText={errors.date && "Incorrect entry."}
                                onChange={() => {}}
                                value={() => {}}
                                KeyboardButtonProps={{
                                    "aria-label": "change date",
                                }}
                            />
                        }
                    />
                </MuiPickersUtilsProvider>

这是我对表单的钩子：

const { handleSubmit, getValues, control, register, errors, setValue } = useForm<Project>({
    submitFocusError: false,
    mode: "onBlur",
    defaultValues: project,
});

我正在使用 a projectbut projectcan be设置表单的默认值，null or undefined而 的date属性project也可以是null. 如果是这种情况，我希望默认值是一个空字符串。

遗憾的是，使用此实现，当我从一个空字段中选择一个日期到 a 时，Date我收到一条警告，告诉我我不应该将文本类型的不受控制的输入更改为受控输入和label值上方的输入堆栈的输入：

甚至可以在DatePicker不破坏所有内容的情况下将空字符串作为 a 的默认值吗？如果可能，应该如何实施？

Answer 1

以前我刚才也有类似的情况，并通过最初设置解决了它defaultValue与initialFocusedDate给null我的Controller。

  const [helperText, isError] = useHelperText(name, errors);
  const defaultValue = useDefaultValue(getValues, name, watch);

  return (
    <Controller
      name={name}
      rules={isRequired}
      control={control}

      // here the magic happens
      initialFocusedDate={null} 
      defaultValue={null} 

      as={
        <KeyboardDatePicker
          disableFuture
          {...rest}
          name={name}
          error={isError}
          helperText={helperText}
          required={Boolean(isRequired?.required)}
          disableToolbar
          variant="inline"
          inputVariant={rest.variant}
          format="dd.MM.yyyy"
          id={name}
          label={label}
          invalidDateMessage=""
          KeyboardButtonProps={{
            "aria-label": "change date",
          }}
        />
      }
    />
  );

这样，如果没有defaultValues来自useForm，则组件会显示一个空的 MUI 输入。