Как установить условное значение по умолчанию для KeyboardDatePicker с реактивной формой подключения? - PullRequest
Новая
       13

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

0 голосов
/ 23 апреля 2020

У меня есть форма, содержащая 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 из входного стека выше значения:

enter image description here

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

1 Ответ

0 голосов
/ 24 апреля 2020

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

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

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

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

...