Question

我有一个表单，其中包含KeyboardDatePicker中的material UI，并且当没有值传递给{{时，我希望它具有一个空字符串值（""）作为默认值1}}对此字段的钩子。

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

日期选择器输入字段：

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的{{1}}属性也可以是{ {1}}。如果是这种情况，我希望默认值是一个空字符串。

遗憾的是，通过此实现，当我从一个空字段中选择一个日期到date时，我得到一条警告，告诉我不要将文本类型的不受控制的输入更改为受控的输入和{{ 1}}高于值的输入堆栈：

是否有可能将一个空字符串作为project的默认值而不破坏所有内容？如果可能，应如何实施？

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输入。

Answer 2

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

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

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

这些值应完全接受表单输入的value和回调，以更改此值而不会发生事件。

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

2 个答案: