React函数组件：如何禁用按钮直至登录表单全部验证通过？

你的代码核心问题是验证逻辑未同时兼顾邮箱和密码的有效性，且状态更新存在不同步情况。以下是优化后的实现方案：

核心修改点 #

• 合并输入变更与验证逻辑，避免重复事件绑定
• 通过计算属性动态判断按钮禁用状态，无需单独维护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 handleChange = (e) => {
    const { name, value } = e.target;
    const newInput = { ...input, [name]: value };
    setInput(newInput);

    // 实时验证对应字段
    if (name === "email") {
      setErrorEmail(emailValidator(newInput.email) ? "" : "请输入有效的邮箱地址");
    } else if (name === "password") {
      setErrorPassword(passwordValidator(newInput.password) ? "" : "请输入有效的密码");
    }
  };

  const formSubmitter = (e) => {
    e.preventDefault();

    // 提交前二次校验
    const isEmailValid = emailValidator(input.email);
    const isPasswordValid = passwordValidator(input.password);

    if (!isEmailValid) setErrorEmail("请输入有效的邮箱地址");
    if (!isPasswordValid) setErrorPassword("请输入有效的密码");

    if (isEmailValid && isPasswordValid) {
      navigate("/");
    }
  };

  // 动态判断按钮禁用状态
  const isButtonDisabled = !emailValidator(input.email) || !passwordValidator(input.password);

  return (
    <form onSubmit={formSubmitter}>
      <input
        type="email"
        name="email"
        value={input.email}
        onChange={handleChange}
        placeholder="邮箱"
      />
      {errorEmail && <span style={{ color: "red" }}>{errorEmail}</span>}

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

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

关键说明 #

1. 实时验证：每次输入变更时立即校验对应字段，更新错误提示，让用户及时得到反馈
2. 动态禁用判断：isButtonDisabled直接通过验证函数计算得出，只有当邮箱和密码都符合规则时，按钮才会启用
3. 提交二次校验：即使前端有实时验证，提交时仍需再次校验，避免绕过前端验证的异常情况
4. 受控组件规范：给input绑定value属性，确保组件状态与输入值完全同步

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