使用 MUI 的声明式 Formik 表单

Question

我想将 formik 与 MUI 一起使用。似乎没有明确的途径来做到这一点，文档没有意义，并且与文档相比，示例也毫无意义。

例如。 此页面位于 formik 示例的顶层。这是我在 formik 网站上找到的唯一集成 MUI 的示例。

• 该示例使用 hooks 方法。似乎没有组件方法的示例
• 示例从核心材质UI包中导入按钮和文本字段。但是，在此沙箱中，组件是从 @mui/material 导入的，并形成 formik-mui。为什么有两个不同的包？为什么文档中没有涵盖这一点？

我想做的就是构建一个带有 mui 样式的 formik 表单，但我找不到任何相关文档。

例如，如果我想使用 MUI 文本字段，有在线示例建议使用此方法。但是，我再次在文档中找不到此内容，并且没有解释此处发生的情况或如何将任何道具应用于此文本字段。

    <Form>
      <Field
        type="email"
        name="email"
        component={TextField}
        color={"error"}
      />

我在这里缺少什么？我只想使用 MUI 构建声明式 formik 表单。

Answer 1

MuI 和 Formik 都有详细的文档记录，唯一的问题是两个文档中都缺少连接部分。

对于声明式 formik，您应该从 hook 切换到 render prop。

<Formik
    //
    initialValues={{ email: '' } as FormValues}
    onSubmit={handleOnSubmit}
>
    {(formik: FormikProps<FormValues>) => (
        <Form>
        </Form>
    )}
</Formik>

澄清一下您对连接部分的困惑。
Mui 不使用 Formik，因此您必须自己编写所有表单字段以连接到 Formik。

<TextField
    name="email"
    label="Email"
    value={formik.values.email}
    onChange={formik.handleChange}
    error={formik.touched.email && Boolean(formik.errors.email)}
    helperText={formik.touched.email && formik.errors.email}
/>

对于那些重复性的工作，有这些整洁的库 formik-mui。
如果您使用该库，则只剩下以下模板。

注意：TextField 来自 formik-mui

import { TextField } from 'formik-mui';

<Field
    component={TextField}
    name="email"
    label="Email"
/>