MUI DatePicker 无法与 Formik 一起正常工作

Question

我在我的 React 项目中使用 Formik 来处理表单并使用 MUI UI 组件。

我可以选择日期、月份，但年份部分不会改变。如果我在文本字段中手动输入年份，则年份部分不会反映在更改后的状态中。

这是我的代码：

                 <LocalizationProvider dateAdapter={DateAdapter}>
                   <DatePicker
                     name="birthday"
                     id="birthday"
                     variant="standard"
                     label="Birthday"
                     value={formik.values.birthday}
                     renderInput={(params) => (
                       <TextField {...params} variant="standard" fullWidth/>
                     )}
                     onChange={(value) => formik.setFieldValue('birthday', value, true)}
                     error={formik.touched.birthday && Boolean(formik.errors.birthday)}
                     helperText={formik.touched.birthday && formik.errors.birthday}
                   />
                 </LocalizationProvider>

初始状态：

const initialFormState = {
  birthday: Date.now(),
};

所有其他组件工作正常，状态变化会立即显示。

Answer 1

onChange 属性未在 DatePicker 组件中设置。您必须将 onChange 属性从 TextField 移动到 DatePicker。

<LocalizationProvider dateAdapter={AdapterDateFns}>
   <DatePicker
      onChange={(value) => setFieldValue("birthday", value, true)}
      value={values.birthday}
      renderInput={(params) => (
      <TextField
        error={Boolean(touched.birthday && errors.birthday)}
        helperText={touched.birthday && errors.birthday}
        label="Birthday"
        margin="normal"
        name="birthday"
        variant="standard"
        fullWidth
        {...params}
       />
       )}
      />
  </LocalizationProvider>

此外，name、id、variant 和 label 是 TextField 的属性。

这是工作 CodeSandbox link.

MUI DatePicker 无法与 Formik 一起正常工作

MUI DatePicker not working correctly with Formik

javascript

datepicker

reactjs

material-ui

formik