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

Question

我有一个包含来自 material UI 的 KeyboardDatePicker 的表单，我希望它有一个空字符串值 ("") 作为默认值，当没有值传递给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,
});

我正在使用 project 设置我的表单的默认值，但 project 可以是 null or undefined 和 date 属性 [=16] =]也可以是null。如果是这种情况，我希望默认值为空字符串。

遗憾的是，通过这个实现，当我 select 一个空字段的日期变成 Date 时，我收到一条警告，告诉我我不应该将文本类型的不受控制的输入更改为控制一个和输入堆栈的 label 上面的值 :

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

Answer 1

为了使日期选择器的值为空，您需要将 null 作为默认值传递。此 codesandbox 确认了此行为 https://codesandbox.io/s/relaxed-poitras-5eohr?file=/src/App.jsx

您的问题是这 2 个值的使用不正确

  onChange={() => {}}
  value={() => {}}

这些值应该完全接受 value 的表单输入和无事件更改此值的回调。

Answer 2

刚才我遇到了类似的情况，通过在我的 Controller.

上最初将 defaultValue 和 initialFocusedDate 设置为 null 来解决它

  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",
          }}
        />
      }
    />
  );

这样，如果 useForm 中不存在 defaultValues，该组件将显示一个空的 MUI 输入。

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

How to set a conditional default value for a KeyboardDatePicker with react-hook-form?

forms

material-ui

react-hooks

react-hook-form