Как установить условное значение по умолчанию для KeyboardDatePicker с помощью формы реагирования?

У меня есть форма, которая содержит KeyboardDatePicker из 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,
});

Я устанавливаю значения по умолчанию для моей формы с помощью project, но project может быть null or undefined, а свойство date project также может быть null. Если это так, я хочу, чтобы значение по умолчанию было пустой строкой.

К сожалению, с этой реализацией, когда я выбираю дату из пустого поля в Date, я получаю предупреждение о том, что мне не следует менять неконтролируемый ввод текста на контролируемый и label входного стека над значением:

введите здесь описание изображения

Возможно ли вообще иметь пустую строку в качестве значения по умолчанию для DatePicker, не нарушая всего? Если это возможно, как это должно быть реализовано?


forms material-ui react-hooks react-hook-form
person Marcel Jr. Samson Morasse    schedule 23.04.2020    source источник
comment
Вы хотите взглянуть на контроллер для этой проблемы: react-hook-form.com/api/ #Контроллер   -  person Bill    schedule 24.04.2020

Ответы (2)


arrow_upward
6
arrow_downward

Минуту назад у меня была аналогичная ситуация, и я решил ее, первоначально установив 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-вход.

person Christoph Hörmann    schedule 15.06.2020

arrow_upward
0
arrow_downward

Чтобы сделать пустое значение для средства выбора даты, вам нужно передать null в качестве значения по умолчанию. Это codeandbox подтверждает это поведение https://codesandbox.io/s/relaxed-poitras-5eohr?file=/src/App.jsx

Ваша проблема связана с неправильным использованием этих двух значений.

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

Эти значения должны принимать ровно value ввода формы и обратный вызов для изменения этого значения без события.

person Dmitriy Kovalenko    schedule 24.04.2020