带 React-hook-form 的 Material UI (MUI) 日期选择器

Question

我正在创建一个带有日期字段的表单。我正在使用 MUI 和 react-hook-form 进行验证。我尝试以两种不同的方式呈现该字段，但是在提交表单时我没有得到预期的值：

渲染1

使用控制器组件：

const [originalReleaseDate, setOriginalReleaseDate] = useState(null);

<Controller
                                name={"original_release_date"}
                                defaultValue={originalReleaseDate}
                                control={control}
                                render={({field}) =>
                                    <LocalizationProvider dateAdapter={AdapterDateFns}>
                                        <DatePicker
                                            label="Original Release Date"
                                            value={originalReleaseDate}
                                            onChange={(newValue) => {
                                                setOriginalReleaseDate(newValue);
                                            }}

                                            renderInput={(params) =>
                                                <TextField
                                                    {...params}
                                                />}
                                        />
                                    </LocalizationProvider>
                            }
                            />

当我以这种方式渲染字段时，我会在提交表单后null得到。original_release_date

渲染2

{...register("reissue_release_date")}直接使用而不是react-hook-form 受控组件注册字段。

const [reissueReleaseDate, setReissueReleaseDate] = useState(null);

<LocalizationProvider dateAdapter={AdapterDateFns}>
                                <DatePicker
                                    label="Reissue Release Date"
                                    value={reissueReleaseDate}
                                    onChange={(newValue) => {
                                        setReissueReleaseDate(newValue);
                                    }}

                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            {...register("reissue_release_date")}
                                        />}
                                />
                            </LocalizationProvider>

这种方法已经成功一半了。如果我手动输入日期，那么我将在提交时获取其值，但是如果我使用日期选择器，然后提交我得到的表单""。

知道发生了什么事吗？

Answer 1

InputDate.propTypes = {
  name: PropTypes.string,
  label: PropTypes.string,
};
export default function InputDate({ name, label }) {
  const { control } = useFormContext();
  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { onChange, value }, fieldState: { error } }) => (

        <LocalizationProvider dateAdapter={AdapterMoment} >
          <DesktopDatePicker
            label={label}
            control={control}
            inputFormat="DD-MM-YYYY"
            value={value}
            onChange={(event) => { onChange(event); }}
            renderInput={(params) => <TextField {...params} error={!!error} helperText={error?.message} />}
          />
        </LocalizationProvider>
      )} />
  )
}

Answer 2

我无法复制您的设置，但我的猜测是，在第一次渲染中，当通过控制器的渲染箭头函数传递时，对“setOriginalReleaseDate”的引用会丢失。

...
onChange={(newValue) => {                                                      
   setOriginalReleaseDate(newValue);
}}
...

因此，尝试将逻辑放入定义的函数中，例如：

const handleOriginalReleaseDateChange = (newValue) => {
    setOriginalReleaseDate(newValue);
};

并更改 onChange 来调用该函数。

...
onChange={handleOriginalReleaseDateChange}
...