1

我有一个包含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属性projectcan also be null。如果是这种情况，我希望默认值为空字符串。

可悲的是，通过这个实现，当我从一个空字段中选择一个日期时，Date我收到一个警告，告诉我我不应该将 text 类型的不受控制的输入更改为受控的输入，并且label输入堆栈的值高于 value ：

在此处输入图像描述

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

4

2 回答 2

6

刚才我遇到了类似的情况，并通过最初将defaultValueAND设置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存在 from useForm，组件将显示一个空的 MUI 输入。

于 2020-06-15T21:51:26.737 回答
2

为了为 datepicker 创建一个空值，您需要将null其作为默认值传递。此代码框确认此行为https://codesandbox.io/s/relaxed-poitras-5eohr?file=/src/App.jsx

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

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

这些值应该完全接受value表单输入和回调以在没有事件的情况下更改此值。

于 2020-04-24T20:37:53.637 回答