如何在React Hook Form中添加错误触发的自定义函数？

1. 先确认依赖安装 #

如果还没安装react-toastify，执行以下命令：

npm install react-toastify
# 或者
yarn add react-toastify

2. 配置全局提示容器 #

在你的表单组件或项目全局入口文件中，引入并渲染ToastContainer（别忘了导入样式）：

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function YourForm() {
  // 表单逻辑写在这里
  return (
    <div>
      {/* 你的表单内容 */}
      <ToastContainer />
    </div>
  );
}

3. 两种触发错误提示的实现方式 #

方式一：监听错误变化自动触发 #

用useEffect监听React Hook Form返回的errors对象，当错误存在时自动弹出提示：

import { useForm, useEffect } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function YourForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // 监听errors，有错误时调用toast
  useEffect(() => {
    if (Object.keys(errors).length > 0) {
      // 遍历所有错误，逐个弹出提示
      Object.values(errors).forEach(error => {
        toast.error(error.message);
      });
      // 也可以合并所有错误成一个提示
      // const errorText = Object.values(errors).map(e => e.message).join('\n');
      // toast.error(errorText);
    }
  }, [errors]);

  const onSubmit = (data) => {
    // 表单提交成功逻辑
    console.log(data);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register('username', {
            required: '用户名不能为空',
            minLength: { value: 3, message: '用户名至少3个字符' }
          })}
        />
        {/* 保留原有的输入框下方错误提示 */}
        {errors.username && <span className="error">{errors.username.message}</span>}

        <input
          {...register('email', {
            required: '邮箱不能为空',
            pattern: { value: /^\S+@\S+$/i, message: '邮箱格式不正确' }
          })}
        />
        {errors.email && <span className="error">{errors.email.message}</span>}

        <button type="submit">提交</button>
      </form>
      <ToastContainer />
    </div>
  );
}

方式二：提交失败时手动触发 #

如果只想在用户点击提交且验证不通过时弹出提示，可利用handleSubmit的第二个错误回调参数：

import { useForm } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function YourForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    // 表单提交成功逻辑
    console.log(data);
  };

  const onSubmitError = (errors) => {
    // 提交失败时触发toast提示
    Object.values(errors).forEach(error => {
      toast.error(error.message);
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit, onSubmitError)}>
        {/* 输入框和原有错误提示 */}
        <input
          {...register('username', {
            required: '用户名不能为空',
            minLength: { value: 3, message: '用户名至少3个字符' }
          })}
        />
        {errors.username && <span className="error">{errors.username.message}</span>}

        <input
          {...register('email', {
            required: '邮箱不能为空',
            pattern: { value: /^\S+@\S+$/i, message: '邮箱格式不正确' }
          })}
        />
        {errors.email && <span className="error">{errors.email.message}</span>}

        <button type="submit">提交</button>
      </form>
      <ToastContainer />
    </div>
  );
}

额外提示 #

• 若要避免重复弹出相同错误，可在useEffect中增加状态记录上次的错误数量，仅当错误数量变化时触发提示；
• react-toastify支持自定义配置，比如调整提示位置、停留时间：toast.error(error.message, { position: "top-right", autoClose: 3000 })；
• 原有输入框下方的错误提示可保留，两种提示方式互不冲突。

内容的提问来源于stack exchange，提问作者Annie