Javascript Formik与材料用户界面

我正在尝试将Formik与Material UI文本字段一起使用。像这样：

import TextField from '@material-ui/core/TextField';
import {
  Field,
  FieldProps,
  Form,
  Formik,
  FormikErrors,
  FormikProps
} from 'formik';
import React, { Component } from 'react';

interface IMyFormValues {
  firstName: string;
}

class CreateAgreementForm extends Component<{}> {
  public render() {
    return (
      <div>
        <h1>My Example</h1>
        <Formik
          initialValues={{ firstName: '' }}
          // tslint:disable-next-line:jsx-no-lambda
          onSubmit={(values: IMyFormValues) => alert(JSON.stringify(values))}
          // tslint:disable-next-line:jsx-no-lambda
          validate={(values: IMyFormValues) => {
            const errors: FormikErrors<IMyFormValues> = {};
            if (!values.firstName) {
              errors.firstName = 'Required';
            }
            return errors;
          }}
          // tslint:disable-next-line:jsx-no-lambda
          render={(formikBag: FormikProps<IMyFormValues>) => (
            <Form>
              <Field
                name="firstName"
                render={({ field, form }: FieldProps<IMyFormValues>) => (
                  <TextField
                    error={Boolean(
                      form.errors.firstName && form.touched.firstName
                    )}
                    helperText={
                      form.errors.firstName &&
                      form.touched.firstName &&
                      String(form.errors.firstName)
                    }
                  />
                )}
              />
            </Form>
          )}
        />
      </div>
    );
  }
}

export default CreateAgreementForm;

从'@material ui/core/TextField'导入TextField'；
进口{
领域
野外道具，
形式，
福米克，
福米克尔，
蚁脚
}来自“福米克”；
从“React”导入React，{Component}；
接口IMYFORM值{
名字：字符串；
}
类CreateAgreementForm扩展组件{
公共渲染（）{
返回(
我的例子
警报（JSON.stringify（值））}
//tslint：禁用下一行：jsx无lambda
验证={（值：IMyFormValues）=>{
常量错误：formickerors={}；
如果（！values.firstName）{
errors.firstName='Required'；
}
返回错误；
}}
//tslint：禁用下一行：jsx无lambda
render={（formikBag:FormikProps）=>(
(
)}
/>
)}
/>
);
}
}
导出默认CreateAgreementForm；

我希望Formik负责外观的验证和材质UI。

---

我想将errors.firstName传递给TextField组件，但错误显示不正确。我如何修复它，使其仍然清晰可读？我不想编写自己的TextField组件。

我认为您不需要另一个库，甚至不需要创建自己的包装器，我认为您需要稍微修改一下代码

import { Formik, Field, Form } from 'formik';
import { TextField } from 'formik-material-ui';

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

您遇到的一个问题是，您没有在Material TextField中传递onChange函数，因此firstName的form值始终为null，因此即使您输入了名称，也总是会出现错误。 尝试在TextField和onChange函数中添加名称或id，如下所示：

<Field
    validateOnBlur
    validateOnChange
    name="firstName"
    render={({ field, form }) => (
    <TextField
        name={"firstName"}
        error={
            Boolean(form.errors.firstName && form.touched.firstName)
        }
        onChange={formikBag.handleChange}
        onBlur={formikBag.handleBlur}
        helperText={
            form.errors.firstName &&
            form.touched.firstName &&
            String(form.errors.firstName)
        }
    />
    )}
/>

(
)}
/>

正如评论中提到的，实现“包装器”组件实际上可能是一个好主意，就像它们在来自Formik或ReactFinalForm的示例中所做的那样：

想法是一样的：实现定制的“包装器”组件来包装材料UI组件，并映射Formik或ReactFinalFormAPI道具

这种方法的优点是将两个框架之间的映射集中在一个地方，这样您就不会每次都重复映射，如果其中一个框架引入了突破性的更改，您只需更改这些自定义“包装器”组件。

您可以尝试以下方法：

安装：

npm install --save formik-material-fields

yarn add formik-material-ui

用法：

import React, { Component } from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';
import { FormikTextField } from 'formik-material-fields';

const validationSchema = Yup.object().shape({
  username: Yup.string().required(),
});

const initialValues = {
  username: '',
};

class MyForm extends Component {
  render() {
    return (
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={this.props.onSubmit}
      >
        {({ isValid }) => (
          <Form autoComplete="off">
            <FormikTextField
              name="username"
              label="Username"
              margin="normal"
              fullWidth
            />
          </Form>
        )}
      </Formik>
    );
  }
}

import React，{Component}来自'React'；
从'Formik'导入{Formik，Form}；
从“是”以是的形式导入*；
从“formik材料字段”导入{FormikTextField}；
const validationSchema=Yup.object（）.shape({
用户名：Yup.string（）.required（），
});
常量初始值={
用户名：“”，
};
类MyForm扩展组件{
render（）{
返回(
{（{isValid}）=>(
)}
);
}
}

您也可以尝试使用此库，它为您完成繁重的工作，并围绕材质UI组件实现包装器代码（包括

）：

安装：

npm install --save formik-material-fields

yarn add formik-material-ui

在Formik表单组件中，将

组件作为Formik

组件的组件道具传递

import { Formik, Field, Form } from 'formik';
import { TextField } from 'formik-material-ui';

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

从'Formik'导入{Formik，Field，Form}；
从“formik材质ui”导入{TextField}；

---

Formik将继续按预期处理验证，并呈现材质UI组件和错误消息。文档中还有其他Mui输入组件的详细信息，有助于定制。

请查看formik文档中的

：

例如，您可以使用材质的OutlinedInput设置输入样式：

<Field as={OutlinedInput} />

---

要使用材料ui和formik，您可以使用官方formik文档中的变体：

您可以使用方法创建自定义输入更改处理程序

console.log（值）}
>
{（{handleSubmit，setFieldValue}）=>(
setFieldValue（“name”，event.target.value）}
type=“text”
label=“Name”
/>
)}

我不知道如何将Material ui组件与Formik验证集成，但我可以推荐react final form，它与MUI集成得非常好：谢谢，但我仍然需要为每个Material ui组件创建自定义组件。我宁愿不去。您知道如何做到这一点吗？这可能看起来有点过分，但我们发现，实际上，像这样包装材料ui表单组件是简单而直接的。我想你一定要把“Frxxx”框架的支柱映射到材质UI组件上。你可以看看这个项目中做了什么：我真的认为你应该考虑为每个材质UI组件创建自定义组件。原因如下：不要重复你自己（从FormikAPI到MUI道具的映射只做了一次），限制MUI或Formik破坏性变化对未来的影响。不，仍然不起作用。当字段为空时，该错误不会显示。该错误会出现，但当前您已将验证设置为显示在提交上。这意味着您需要按enter键才能显示它。如果您想让它们同时出现在onChange和onBlur上，请查看我的更新答案。希望这能有所帮助。您会发现自己在每个“字段”实例中都会重复映射到材质UI组件的道具，这就是为我创建材质UI包装的意义所在，将此映射集中在自定义组件中是有意义的。想象有一天，MUI或Formik的API/道具发生了突破性的变化。你只需要更新一个组件！您是对的，包装器组件是一个好主意。但我认为首先要做的是让它在单个领域工作，然后他可以专注于根据他需要构建的内容构建包装器。这是一个很好的答案！！感谢一个需要一个快速简单UI的后端人员，这个库