在ReactJs中使用Formik库处理form & Yup库

在React应用中，Formik和Yup是非常流行的库，用于处理表单和表单验证。Formik简化了表单状态管理，而Yup提供了强大的验证功能。以下是一个完整的示例，展示如何在React中使用Formik和Yup来处理表单和验证。

安装依赖

首先，确保你已经安装了Formik和Yup：

npm install formik yup

创建表单组件

接下来，创建一个表单组件，使用Formik来管理表单状态，并使用Yup来进行表单验证。

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

const SignupForm = () => {
  // 定义表单初始值
  const initialValues = {
    name: '',
    email: '',
    password: '',
  };

  // 定义表单验证规则
  const validationSchema = Yup.object({
    name: Yup.string()
      .min(2, 'Name must be at least 2 characters')
      .required('Name is required'),
    email: Yup.string()
      .email('Invalid email address')
      .required('Email is required'),
    password: Yup.string()
      .min(6, 'Password must be at least 6 characters')
      .required('Password is required'),
  });

  // 定义表单提交处理函数
  const onSubmit = (values, { setSubmitting }) => {
    console.log('Form data', values);
    setTimeout(() => {
      setSubmitting(false);
    }, 500);
  };

  return (
    <div>
      <h1>Signup Form</h1>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={onSubmit}
      >
        {({ isSubmitting }) => (
          <Form>
            <div>
              <label htmlFor="name">Name</label>
              <Field type="text" id="name" name="name" />
              <ErrorMessage name="name" component="div" />
            </div>

            <div>
              <label htmlFor="email">Email</label>
              <Field type="email" id="email" name="email" />
              <ErrorMessage name="email" component="div" />
            </div>

            <div>
              <label htmlFor="password">Password</label>
              <Field type="password" id="password" name="password" />
              <ErrorMessage name="password" component="div" />
            </div>

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

export default SignupForm;

解释代码

Formik组件：Formik组件包裹整个表单，并提供表单状态管理和提交处理。
initialValues：定义表单的初始值。
validationSchema：使用Yup定义表单验证规则。
onSubmit：定义表单提交处理函数。
Field组件：Formik提供的组件，用于渲染表单输入字段，并自动绑定表单状态。
ErrorMessage组件：Formik提供的组件，用于显示验证错误信息。

使用表单组件

在你的应用中使用这个表单组件：

import React from 'react';
import ReactDOM from 'react-dom';
import SignupForm from './SignupForm';

const App = () => (
  <div>
    <SignupForm />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));