异步表单校验：用React Hooks在100行代码内实现

2024-02-19 11:50:59

序言

React Hooks 是一个非常强大的工具，它可以帮助您在实际的表单应用场景中轻松实现异步表单校验，从而提升用户体验。本文将使用 React Hooks API 通过 100 行代码来实现支持异步的表单校验功能。

前置准备

为了使用 React Hooks，您需要使用 React 版本 16.8 或更高。您还可以在代码中使用 create-react-app 命令来创建新的 React 项目，以确保您使用的是正确的 React 版本。

代码实现

首先，我们创建一个名为 useAsyncValidation 的自定义 Hook。这个 Hook 将接受一个用于异步验证表单数据的函数作为参数，并返回一个状态对象，该对象包含表单的验证状态和错误消息。

import { useState, useEffect } from "react";

const useAsyncValidation = (validationFunction) => {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errors, setErrors] = useState({});

  const validateForm = async (data) => {
    setIsSubmitting(true);
    const errors = await validationFunction(data);
    setErrors(errors);
    setIsSubmitting(false);
  };

  return { isSubmitting, errors, validateForm };
};

接下来，我们将创建一个名为 Form 的组件。这个组件将使用 useAsyncValidation Hook 来实现异步表单校验功能。

import React, { useState } from "react";
import useAsyncValidation from "./useAsyncValidation";

const Form = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
  });

  const { isSubmitting, errors, validateForm } = useAsyncValidation((data) => {
    // 这里写异步验证逻辑
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (data.name === "") {
          reject({ name: "Name is required" });
        } else if (data.email === "") {
          reject({ email: "Email is required" });
        } else if (data.password === "") {
          reject({ password: "Password is required" });
        } else {
          resolve({});
        }
      }, 1000);
    });
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    validateForm(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        placeholder="Name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        placeholder="Email"
        value={formData.email}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        placeholder="Password"
        value={formData.password}
        onChange={handleChange}
      />
      <button type="submit" disabled={isSubmitting}>
        Submit
      </button>
      {errors.name && <p>{errors.name}</p>}
      {errors.email && <p>{errors.email}</p>}
      {errors.password && <p>{errors.password}</p>}
    </form>
  );
};

export default Form;