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

发布于 2025-01-14 05:54:42 字数 1089 浏览 4 评论 0原文

我在 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(),
};

所有其他组件都正常工作并且状态更改立即显示。

原文

I am using Formik in my React project to process forms and using MUI UI components.

I am able to pick the day, month, but the year part does not change. If I manually type in year in the textfield, the year part is not reflected in the changed state.

Here's my code:

                 <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>

The initial state:

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

All the other components are working correctly and changes in state show immediately.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧城烟雨 2025-01-21 05:54:42

对于@mui-picker v6，我已经实现了此解决方案

<LocalizationProvider dateAdapter={AdapterMoment}>
    <DatePicker
        disableFuture
        label="Date"
        format="DD/MM/YYYY"
        value={formik.values.date}
        onChange={(value) => formik.setFieldValue("date", value, true)}
        slotProps={{
            textField: {
                variant: "outlined",
                error: formik.touched.date && Boolean(formik.errors.date),
                helperText: formik.touched.date && formik.errors.date
            }
        }}
    />
</LocalizationProvider>

有关更多详细信息，点击此处

For @mui-picker v6 I have implemented this solution

<LocalizationProvider dateAdapter={AdapterMoment}>
    <DatePicker
        disableFuture
        label="Date"
        format="DD/MM/YYYY"
        value={formik.values.date}
        onChange={(value) => formik.setFieldValue("date", value, true)}
        slotProps={{
            textField: {
                variant: "outlined",
                error: formik.touched.date && Boolean(formik.errors.date),
                helperText: formik.touched.date && formik.errors.date
            }
        }}
    />
</LocalizationProvider>

For more details, click here

回复收藏 0 原文

ˉ厌 2025-01-21 05:54:42

DatePicker 组件中未设置 onChange 属性。您必须将 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>

此外，名称、id、变体和标签都是 TextField 的属性。

这是工作 CodeSandbox 链接。

The onChange property is not set in the DatePicker component. You have to move the onChange property from TextField to 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>

Also, the name, id, variant and label are TextField's properties.

Here is the working CodeSandbox link.

回复收藏 0 原文

~没有更多了~