如何使用Formik，YUP和Material-UI创建自定义输入组件-DEV365 开发者社区

组件是我们的UI的构建块，并且具有可重复使用，清洁和高效的代码很容易。在本教程中，我们将学习如何使用React，material-ui和yup创建自定义输入字段组件。我们将在Formik Field中使用material-ui组件，并使用yup实现验证。

简介

表单是许多Web应用程序中常见的很棒的功能，可以使用流行的Javascript库（例如React和formik）创建一个自定义组件，这是一个简单的过程，具有不错的功能和错误处理。

创建项目

让我们使用vite命令行工具创建一个新项目：

npm create vite@latest

这将提示我们选择项目名称（对于本教程，我们使用了Formik-Input-component），软件包名称（formik-Input-component），Framework（react）和变体（JavaScript）。
毕竟，我们运行以下代码：

  cd Formik-Input-component
  npm install
  npm run dev

附件是该过程的屏幕截图：

安装

接下来，我们将使用NPM或纱线安装formik，yup和material ui包：

npm install @mui/material @emotion/react @emotion/styled formik yup

或

yarn install @mui/material @emotion/react @emotion/styled formik yup

实施

成功安装了软件包后，我们可以创建一个名为formikControl的文件夹，其中所有文件将被保存。在formikControl文件夹中，我们将创建以下文件

FormikControl.jsx
Input.jsx
SelectInput.jsx
index.js，
TextError.jsx

组件

让我们从我们的Input.jsx文件开始，我们将在文件中进行以下导入

 import { Field, useField } from "formik";
 import PropTypes from "prop-types";
 import { FormLabel, Grid, TextField } from "@mui/material";

导入后，我们创建一个功能组件和以下代码：

 const Input = (props) => {
 const { name, label, ...rest } = props;
 const [field] = useField(name);

  return (
    <Grid container direction="column">
      <FormLabel component="legend">{label}</FormLabel>
      <Field {...field} {...rest} as={TextField} />
    </Grid>
  );
};

Input.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string,
};

export default Input

<Field/>自动将我们的TextField钩到Formik。使用as属性，我们可以渲染一个react组件，而formik将自动注入onChange，onBlur，name和value props的输入字段的props归因于组件的名称prop。我们从usefield破坏了field对象进行此操作。

要处理验证中的错误，我们使用已经创建的<TextError/>并将其渲染在我们的下面。为了获取错误消息，我们从formik破坏ErrorMessage，然后像我们为Textfield In一样传递<TextError/>。以下是我们拥有的新代码：

import { ErrorMessage, Field, useField } from "formik";
import PropTypes from "prop-types";
import { FormLabel, Grid, TextField } from "@mui/material";
import TextError from "./TextError";
const Input = (props) => {
  const { name, label, ...rest } = props;
  const [field] = useField(name);

  return (
    <Grid container direction="column">
      <FormLabel component="legend">{label}</FormLabel>
      <Field {...field} {...rest} as={TextField} />
      <ErrorMessage name={name} as={TextError} />
    </Grid>
  );
};

Input.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string.isRequired,
};

export default Input;

我们要做的下一件事是定义我们的。

texterror.jsx

import PropTypes from "prop-types";

const TextError = ({ children }) => {
  return <div style={{color:"red"}}>{children}</div>;
};

TextError.propTypes = {
  children: PropTypes.node,
};

export default TextError

<TextError/>呈现出从错误记录返回并显示的任何错误，

注意：我们给它一种颜色红色以显示这是一个错误。

渲染我们的输入字段

要向用户显示我们的输入字段，我们尝试使其无缝且易于使用。为此，我们将输入组件导入到我们的。这是完整的代码

import Input from "./Input";
import PropTypes from "prop-types";
const FormikControl = ({ control, ...rest }) => {
  switch (control) {
    case "input":
      return <Input {...rest} />;
    // other cases...
     default:
    return null;
  }
};
FormikControl.propTypes = {
  control: PropTypes.string.isRequired,
};
export default FormikControl;

control Prop有助于在创建的不同类型的输入字段之间切换，其余道具用于将其他详细信息传递给输入字段组件。

Yaaah .....我们的组件已准备好使用......

要使用该组件，我们将其导入A并将其渲染，就像下面在<App/>

中所示

app.jsx

import {  Grid,Button } from "@mui/material";
import {  Formik,Form } from "formik";
import FormikControl from "./FormikControl";
const App = () => {
  return (
    <Formik
      initialValues={{
        FullName: "",
      }}
      onSubmit={(values)=>console.log(values) }
    >
        <Form style={{ width: "100%" }}>
            <Grid container direction="column">
              <FormikControl
                control="input"
                label="Name"
                id="name"
                name="FullName"
                placeholder="Enter your name"
              />
           <Button type="submit">Submit</Button>
            </Grid>
          </Form>
        );

    </Formik>
  );
};
export default App;

在这里，我们导入了<FormikControl/>并将其渲染在Formik中，我们通过了initialValues和onSubmit道具。我们必须确保我们的<FormikControl/>中的name属性与我们的intialValues中的属性匹配。使用该Formik自动分配的值和其他字段道具。

yup实施

创建我们的输入组件后，我们想向其添加一些验证，yup是一个JavaScript架构构建器，用于价值解析和验证。我们已经安装了包并使用它，我们将其导入到我们的中，并定义验证规则，如下所示：

import * as Yup from "yup"

接下来，我们将验证模式对象定义为下面的

 const validationSchema = Yup.object({
    FullName: Yup.string("Enter your Name").required("Name is required"),
  });

在这里，我们还将使用中使用的名称属性作为验证有效工作的关键。
最后，我们将validationSchema作为Formik组件的道具传递给了。这是<App/>中的最终代码。

app.jsx


import { Form, Formik } from "formik";
import { Grid, Button } from "@mui/material";
import * as Yup from "yup";
import FormikControl from "./FormikControl";
const App = () => {
  const validationSchema = Yup.object({
    FullName: Yup.string("Enter your Name").required("name is required"),
  });

  return (
    <Formik
      initialValues={{
        FullName: "",
      }}
      validationSchema={validationSchema}
      onSubmit={(values) => console.log(values)}
    >
      <Form style={{ marginTop: "1rem", width: "100%" }}>
        <Grid container direction="column">
          <FormikControl
            control="input"
            label="Name"
            id="name"
            name="FullName"
            placeholder="Enter your FullName"
          />
        </Grid>
        <Button type="submit">Submit</Button>
      </Form>
    </Formik>
  );
};
export default App;

结束了有关使用yup，formik和material-ui实现<FormikControl />的课程。该代码可在此repo中使用，我还实施了输入字段，例如TextArea，无线电，日期，时间，选择和复选框。

。

感谢您的阅读