React点击提交按钮触发自定义输入组件表单验证问题咨询

• 执行顺序错乱：你给document绑定的原生点击事件触发时机晚于React合成事件的onClick回调。第一次点击提交按钮时，先执行getValidity计算表单合法性，此时所有字段的校验状态还是上一次的旧值，计算完成后才会触发document上的监听更新各个字段的校验状态，所以第一次点击拿到的永远是旧的校验结果，第二次点击才能读取到第一次更新后的值。
• 全局监听泄漏：你在FormBox的useEffect中绑定全局点击事件没有加依赖数组，也没有写清理逻辑，每次组件渲染都会新增一个监听，会导致重复执行、内存泄漏问题。
• 异步状态读取错误：React的setState是异步更新的，你刚调用setFormValidity就立刻打印formValidity，拿到的也是更新前的旧值。

采用ref + useImperativeHandle的主动校验方案，点击提交时父组件主动触发所有子输入框的校验逻辑，一次点击即可拿到全部最新校验结果。

修改后的FormBox组件代码 #

import React, { useEffect, useRef, useState, useImperativeHandle, forwardRef } from "react";
import styles from "./formbox.module.scss";

interface IFormBox {
  type: string;
  placeholder: string;
  errorMessage?: string;
  required?: boolean; // 新增是否必填配置
}

// 暴露给父组件的方法类型
export interface FormBoxRef {
  validate: () => boolean;
}

export const FormBox = forwardRef<FormBoxRef, IFormBox>(({ type, placeholder, errorMessage, required = true }, ref) => {
  const [valid, setValid] = useState(true);
  const inputRef = useRef<HTMLInputElement>(null);

  // 暴露校验方法给父组件
  useImperativeHandle(ref, () => ({
    validate: () => {
      if (!inputRef.current) return true;
      const isValValid = inputRef.current.checkValidity();
      // 必填项还要校验非空
      const isEmpty = inputRef.current.value.trim() === '';
      const res = required ? (isValValid && !isEmpty) : isValValid;
      setValid(res);
      return res;
    }
  }))

  const checkValidityChange = () => {
    if (inputRef.current) {
      setValid(inputRef.current.checkValidity());
    }
  }

  useEffect(() => {
    if (!inputRef.current) return;
    inputRef.current.style.backgroundColor = valid && inputRef.current.value !== "" ? "#e8f0fe" : "white";
  }, [valid])

  return (
    <div className={styles.container}>
      <input 
        ref={inputRef}
        onChange={checkValidityChange}
        name="formInput" 
        type={type}
        placeholder={placeholder}
        onBlur={() => {
          if (inputRef.current?.value === "") {
            inputRef.current.style.backgroundColor = "white";
          }
        }}
      />
      {!valid && errorMessage && <span>{'* '.concat(errorMessage)}</span>}
    </div>
  );
})

修改后的CheckoutPage组件代码 #

import React, { useRef, useState } from 'react';
import { FormBox, FormBoxRef } from '../FormBox';
import styles from './checkoutpage.module.scss'

export function CheckoutPage() {
  const [formValidity, setFormValidity] = useState<boolean | null>(null);
  // 给每个表单项创建ref
  const formRefs = {
    email: useRef<FormBoxRef>(null),
    name: useRef<FormBoxRef>(null),
    address: useRef<FormBoxRef>(null),
    apt: useRef<FormBoxRef>(null),
    city: useRef<FormBoxRef>(null),
    province: useRef<FormBoxRef>(null),
    postalCode: useRef<FormBoxRef>(null),
    country: useRef<FormBoxRef>(null),
    phone: useRef<FormBoxRef>(null),
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 遍历所有表单项调用校验方法，收集结果
    const validateResults = Object.values(formRefs).map(ref => ref.current?.validate() ?? true);
    const isFormValid = validateResults.every(res => res);
    setFormValidity(isFormValid);
    
    if (isFormValid) {
      // 校验通过后续逻辑，比如提交表单
      console.log('表单校验通过，可以提交');
    }
  }

  return (
    <div className={styles.container}>
      <form className={styles.formContainer} onSubmit={handleSubmit}>
        <h2>checkout</h2>
        <legend>Contact info</legend>
        <FormBox
          ref={formRefs.email}
          type='email'
          placeholder='Email address'
          errorMessage='Enter a valid email address'
        />
        <legend>Shipping info</legend>
        <FormBox
          ref={formRefs.name}
          type='name'
          placeholder='Name'
        />
        <FormBox
          ref={formRefs.address}
          type='text'
          placeholder='Street address'
        />
        <FormBox
          ref={formRefs.apt}
          type='text'
          placeholder='Apt / Suite / Other (optional)'
          required={false} // 非必填项
        />
        <div className={styles.divideBox}>
          <FormBox
            ref={formRefs.city}
            type='text'
            placeholder='City'
          />
          <FormBox
            ref={formRefs.province}
            type='text'
            placeholder='Province'
          />
        </div>
        <div className={styles.divideBox}>
          <FormBox
            ref={formRefs.postalCode}
            type='text'
            placeholder='Postal Code'
          />
          <FormBox
            ref={formRefs.country}
            type='text'
            placeholder='Country'
          />
        </div>
        <FormBox
          ref={formRefs.phone}
          type='text'
          placeholder='Phone Number'
        />
        <button type="submit" className={styles.btn}>Place Your Order</button>
        {formValidity === true && <span style={{backgroundColor: "green"}}>Form is valid</span>}
        {formValidity === false && <span style={{backgroundColor: "red"}}>Form is invalid</span>}
      </form>
    </div>
  );
}

• 表单值统一管理：可以用useState存一个表单对象，或者用成熟的表单库比如react-hook-form，减少冗余的状态声明。
• 样式逻辑抽离：不要直接操作DOM的style属性，通过动态绑定class的方式控制背景色等样式，代码更易维护。
• 校验规则可配置：可以给FormBox扩展自定义校验规则的props，满足更多场景的校验需求。
• 错误状态联动：用户修改输入框内容时自动清除对应错误提示，提升交互体验。

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