Formik表单无法与Material UI联动问题求助

问题根源 #

你遇到的输入框不显示初始值、提交时状态不更新的问题，本质是Formik的Field组件与MUI TextField的props绑定失效。TSX的类型检查比JSX更严格，默认的component传递方式无法正确将Formik的状态（value、onChange）同步到TextField，而JSX因为无类型校验，隐式兼容了这种不匹配，所以能正常工作。

解决方案 #

方案一：手动绑定Formik状态（最稳妥，无类型适配问题）

直接弃用Field组件，手动将Formik的values和handleChange绑定到TextField：

import { Formik, Form as FormikForm } from "formik";
import { TextField, Button } from "@mui/material";

<Formik
  initialValues={{ name: "test" }}
  onSubmit={this.onSubmit}
>
  {({ values, handleChange }) => (
    <FormikForm>
      <TextField
        name="name"
        label="Name"
        fullWidth
        value={values.name}
        onChange={handleChange}
      />
      <Button
        color="success"
        variant="contained"
        type="submit"
        onClick={() => console.log(values)}
      >
        Erstellen
      </Button>
    </FormikForm>
  )}
</Formik>

方案二：使用Field的Render函数模式（保留Field用法）

如果想继续用Field，改用render函数传递props，确保Formik的field对象（包含value、onChange等）正确映射到TextField：

import { Formik, Form as FormikForm, Field } from "formik";
import { TextField, Button } from "@mui/material";

<Formik
  initialValues={{ name: "test" }}
  onSubmit={this.onSubmit}
>
  {({ form }) => (
    <FormikForm>
      <Field name="name">
        {({ field }) => (
          <TextField
            {...field}
            label="Name"
            fullWidth
          />
        )}
      </Field>
      <Button
        color="success"
        variant="contained"
        type="submit"
        onClick={() => console.log(form.values)}
      >
        Erstellen
      </Button>
    </FormikForm>
  )}
</Formik>

额外提示 #

按钮的onClick打印状态只是临时调试用，更规范的做法是在onSubmit回调里处理表单数据，Formik会自动传入最新的values参数。

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