react Formik简介

Formik 是一个用于在 React 应用程序中构建和处理表单数据的流行开源库。它提供了许多实用的组件和函数，使在 React 应用程序中处理表单数据变得更加轻松愉快。传统的 React 表单管理方法需要为每个表单字段创建一个 useState() 钩子，为每个字段添加事件监听器，并触发方法以单独更新它们。而 Formik 在幕后处理了所有这些繁琐的操作。我们只需要导入它提供的组件，我们的表单数据就可以轻松使用了。

例子：

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";

function App() {
 return (
   <div className="App">
     <center>
       <h1>Register a new account</h1>
       <Formik>
         {({ isSubmitting }) => (
           <Form>
             <Field
               type="text"
               name="fullname"
               placeholder="Enter your fullname"
             />
             <ErrorMessage name="fullname" component="div" />

             <Field
               type="email"
               name="email"
               placeholder="Enter email address"
             />
             <ErrorMessage name="email" component="div" />

             <Field type="password" name="password" />
             <ErrorMessage name="password" component="div" />

             <button type="submit" disabled={isSubmitting}>
               Submit
             </button>
           </Form>
         )}
       </Formik>
     </center>
   </div>
 );
}

export default App;

在上面的代码中，Formik 组件包装了表单，并提供了管理表单状态、处理验证和提交表单的必要上下文。Field 组件定义了每个表单输入，例如 fullname、email 和 password，而 ErrorMessage 组件用于显示每个字段的验证错误。

Formik还可以搭配第三方库Yup进行校验

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

function App() {
  const SignupSchema = Yup.object().shape({
    firstName: Yup.string()
      .min(2, 'Too Short!')
      .max(50, 'Too Long!')
      .required('Required'),
    lastName: Yup.string()
      .min(2, 'Too Short!')
      .max(50, 'Too Long!')
      .required('Required'),
    email: Yup.string()
      .email('Invalid email')
      .required('Required'),
  });

  return (
    <div className="App">
      <center>
        <h1>Register a new account</h1>
        <Formik
          initialValues={{
            firstName: '',
            lastName: '',
            email: '',
          }}
          validationSchema={SignupSchema}
          onSubmit={(values) => {
            // Handle form submission
            console.log(values);
          }}
        >
          {({ isSubmitting }) => (
            <Form>
              <Field type="text" name="firstName" placeholder="Enter your first name" />
              <ErrorMessage name="firstName" component="div" />

              <Field type="text" name="lastName" placeholder="Enter your last name" />
              <ErrorMessage name="lastName" component="div" />

              <Field type="email" name="email" placeholder="Enter email address" />
              <ErrorMessage name="email" component="div" />

              <button type="submit" disabled={isSubmitting}>
                Submit
              </button>
            </Form>
          )}
        </Formik>
      </center>
    </div>
  );
}

export default App;

相比于Formik原生，使用Yup作为校验更为方便简洁。