React函数组件中如何禁用按钮直到表单全部验证通过？

现有代码的核心问题 #

• 仅在密码验证通过时启用按钮，未同步校验邮箱有效性
• 使用onKeyUp触发验证不够实时，且setInput为异步操作，onKey中获取的input可能不是最新输入值
• 按钮类型设为button，无法触发表单onSubmit标准流程，手动调用onKey逻辑冗余
• isDisabled状态维护繁琐，易出现状态不同步问题

修复后的完整代码 #

import React, { useState } from "react";
import { emailValidator, passwordValidator } from "./regexValidator";
import { useNavigate } from "react-router-dom";

export default function Login() {
  const navigate = useNavigate();

  const [input, setInput] = useState({ email: "", password: "" });
  const [errorPassword, setErrorPassword] = useState("");
  const [errorEmail, setErrorEmail] = useState("");

  // 统一验证逻辑：返回表单是否整体有效，同时更新错误提示
  const validateForm = () => {
    let isFormValid = true;

    // 邮箱验证
    if (!emailValidator(input.email)) {
      setErrorEmail("请输入有效的邮箱地址");
      isFormValid = false;
    } else {
      setErrorEmail("");
    }

    // 密码验证
    if (!passwordValidator(input.password)) {
      setErrorPassword("请输入有效的密码");
      isFormValid = false;
    } else {
      setErrorPassword("");
    }

    return isFormValid;
  };

  const handleChange = (e) => {
    // 函数式更新确保获取最新的input状态
    setInput(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (validateForm()) {
      navigate("/");
    }
  };

  // 直接计算按钮禁用状态，无需单独维护isDisabled
  const isButtonDisabled = !validateForm();

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={input.email}
        onChange={handleChange}
        placeholder="请输入邮箱"
      />
      {errorEmail && <span style={{ color: "#ff4444" }}>{errorEmail}</span>}

      <input
        type="password"
        name="password"
        value={input.password}
        onChange={handleChange}
        placeholder="请输入密码"
      />
      {errorPassword && <span style={{ color: "#ff4444" }}>{errorPassword}</span>}

      <button type="submit" disabled={isButtonDisabled}>
        登录
      </button>
    </form>
  );
}

关键修改说明 #

• 移除冗余的isDisabled状态，通过validateForm的返回值直接计算按钮禁用状态，彻底避免状态不同步
• 抽离validateForm统一处理验证逻辑，确保只有邮箱和密码同时验证通过时，表单才判定为有效
• handleChange使用函数式更新setInput，保证获取最新的输入值
• 按钮类型改为submit，配合表单onSubmit事件，遵循HTML表单标准提交流程
• 补充错误信息的可视化展示，让用户明确知晓输入问题
• 为input添加value属性，将组件改为受控组件，符合React最佳实践

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