react hook form + material ui: 日期选择器没有得到初始日期

Question

我和使用 React 钩子形式。我有以下日期选择器控制器。

          <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <Controller
              name="dateOfBirth"
              control={control}
              render={({ field: { ref, ...rest } }) => (
                <KeyboardDatePicker
                  ref={ref}
                  margin="dense"
                  fullWidth
                  id="date-picker-dialog"
                  label="Date picker dialog"
                  format="MM/dd/yyyy"
                  KeyboardButtonProps={{
                    "aria-label": "change date",
                  }}
                  {...rest}
                />
              )}
            />
          </MuiPickersUtilsProvider>

现在，当我在不更改日期的情况下提交时，它根本不会在提交数据中显示 dateOfBirth。

但是当我更改日期时 dateOfBirth 会显示在提交数据中

Answer 1

发生这种情况是因为您没有设置 defaultValue。使用 <Controller /> 时，需要提供 defaultValue，来自 documentation:

You need to either provide defaultValue at the field-level or useForm with defaultValues.

另一件小事：您应该将 ref 传递给 <KeyboardDatePicker /> 的 inputRef，以便 RHF 可以 link 将其传递给实际的输入元素。

react hook form + material ui: 日期选择器没有得到初始日期

react hook form + material ui: Date Picker not getting the initial date

react-hook-form