Formik表单集成Material UI日期选择器提交无法获取字段值问题

问题说明 #

你的现有实现不正确，该需求完全可以实现。

核心问题 #

你提交时拿不到日期字段值的根本原因是：日期选择器的状态没有和Formik的表单状态做绑定。你单独用setSelectedDate维护了局部状态，Formik无法感知这个值的变化，因此提交时收集的values对象中不会包含日期字段。
同时你当前代码使用的是原生type="date"的TextField，并不是你计划引入的Material UI DateTimePicker组件。

正确实现方案 #

这里提供两种适配场景的实现方式：

方案1：继续使用现有原生date类型TextField

不需要单独维护selectedDate局部状态和handleDateChange方法，直接绑定Formik的字段状态即可：

<TextField
    id="date"
    label="Proposed Match Date"
    type="date"
    // 必须设置name属性，Formik根据name识别表单字段
    name="proposedMatchDate"
    // 直接绑定Formik提供的字段属性
    {...formik.getFieldProps('proposedMatchDate')}
    InputLabelProps={{
        shrink: true,
    }}
/>

绑定后提交的values.proposedMatchDate会自动返回YYYY-MM-DD格式的字符串值，可直接使用。

方案2：使用Material UI官方DateTimePicker实现

如果要使用你预期的DateTimePicker组件，按以下方式绑定Formik状态即可：

1. 组件引入

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import TextField from '@mui/material/TextField';

2. 表单内组件代码

<DateTimePicker
  label="Proposed Match Date"
  value={formik.values.proposedMatchDate}
  onChange={(newValue) => {
    // 直接将选中值同步到Formik表单状态
    formik.setFieldValue('proposedMatchDate', newValue);
  }}
  renderInput={(params) => <TextField {...params} />}
/>

如果需要调整提交时的日期格式，直接在onSubmit中处理即可：

onSubmit={async (values, {setSubmitting}) => {
  const submitParams = {
    ...values,
    // 示例：将日期转为ISO格式字符串提交
    proposedMatchDate: values.proposedMatchDate?.toISOString() || ''
  }
  console.log(submitParams)
  setSubmitting(false)
}}

内容的提问来源于stack exchange，提问作者Sandy