React注册表单：输入为空或有错误时禁用提交按钮

要实现输入为空或存在错误时禁用提交按钮，你可以通过判断输入字段完整性、错误对象状态来生成禁用条件，具体实现如下：

1. 编写按钮禁用的判断逻辑 #

在组件return语句之前添加一个计算变量，检查两个核心条件：

• 所有输入字段是否都已填写（无空值）
• 错误对象中是否存在任何错误提示

// 在return之前新增
const shouldDisableButton = 
  // 检查是否有输入字段为空
  !input.username || !input.email || !input.password || 
  // 检查是否存在任何错误
  error.username || error.email || error.password;

2. 绑定到按钮的disabled属性 #

修改提交按钮代码，将上述变量传入disabled属性：

<button className="btn" disabled={shouldDisableButton}>Create account</button>

3. 修复邮箱验证的异步更新问题 #

你的代码中邮箱验证存在小bug：使用input.email验证时，setInput是异步更新的，此时input.email可能还是旧值，需改用当前输入的value：

// 原邮箱验证代码
// else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(input.email)) {
// 修改为
else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {

完整修改后的组件代码 #

import React, { useState } from 'react';
import './signup.css';

function Signup() {

const [input, setInput] = useState({
    username: "",
    email: "",
    password: ""
});

const [error, setError] = useState({
    username: "",
    email: "",
    password: ""
});

const onInputChange = (e: any) => {
      const { name, value } = e.target;
      setInput(prev => ({
        ...prev,
        [name]: value
      }));
      validateInput(e);
};
const validateInput = (e: any) => {
  let { name, value } = e.target;
  setError(prev => {
  const stateObj = { ...prev, [name]: "" };
  const minLengthUser = /.{4,}/;
  const minLengthUsername = minLengthUser.test(value);
  const minLenghtPass = /.{6,}/;
  const minLenghtPassword = minLenghtPass.test(value);

switch (name) {
  case "username":
    if (!value) {
      stateObj[name as keyof typeof stateObj] = "Username is required";
    } else if (!minLengthUsername) {
        stateObj[name as keyof typeof stateObj] = "Username should be minimum 4 characters"
    };
break;

  case "email":
    if (!value) {
        stateObj[name as keyof typeof stateObj] = "Email address is required"
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
        stateObj[name as keyof typeof stateObj] = 'Invalid email address'
    }
  break;

  case "password":
    if (!value) {
      stateObj[name as keyof typeof stateObj] = "Password is required";
    } else if (!minLenghtPassword) {
        stateObj[name as keyof typeof stateObj] = "Password should be minimum 6 characters";
    }
  break;

  default:
  break;
}

return stateObj;
});
}

// 按钮禁用判断逻辑
const shouldDisableButton = 
  !input.username || !input.email || !input.password || 
  error.username || error.email || error.password;

return (
<div className="container">
 <div className="box">
    <h1>
      <p className="title">Create an account</p>
    </h1>
    <form className="form">
        <div className="form-outline">
            <label className="input-label">Your Name</label>
            <input
              name="username"
              type="text"
              className="input"
              value={input.username}
              onChange={onInputChange}
              onBlur={validateInput}
            />
            {error.username && <div className="alert"><span className="err">{error.username}</span></div>}
        </div>

        <div className="form-outline">
            <label className="input-label">Your Email</label>
            <input
              name="email"
              type="email"
              className="input"
              value={input.email}
              onChange={onInputChange}
              onBlur={validateInput}
            />
            {error.email && <div className="alert"><span className="err">{error.email}</span></div>}
        </div>

        <div className="form-outline">
            <label className="input-label">Password</label>
            <input
              name="password"
              type="password"
              className="input"
              value={input.password}
              onChange={onInputChange}
              onBlur={validateInput}
            />
            {error.password && <div className="alert"><span className='err'>{error.password}</span></div>}
        </div>

        <div className="button">
            <button className="btn" disabled={shouldDisableButton}>Create account</button>
        </div>

    </form>
 </div>
</div>
)
}

export default Signup;

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