如何基于密码字段匹配在useReducer中正确修改按钮禁用状态？

我正在开发一个包含用户名、邮箱、密码和重复密码字段的基础表单，使用useReducer管理表单状态，但buttonDisabled状态无法正确计算。需求是：页面加载时按钮禁用，当所有字段不为空且密码与重复密码匹配时，按钮启用。

SignUpReducer.js #

const initialState = {
    userName: "",
    email: "",
    password: "",
    repeatedPassword: "",
    buttonDisabled: true
}

export const formReducer = (state, action) => {
    console.log(state, "STATE");
    console.log(state.buttonDisabled, "BUTTON DISABLED?");
    switch(action.type) {
        case "Handle Input Text":
            return {
                [action.field]: action.payload,
                buttonDisabled: state.password === state.repeatedPassword,
            };
        default: 
            return state;
    }
}

SignUpPage.js #

import React from "react";
import { useReducer } from "react";
import { formReducer, initialState } from "./SignUpReducer";

const SignUpPage = () => {
    const [state, dispatch] = useReducer(formReducer, initialState);

    const handleTextChange = (e) => {
        dispatch({
            type: "Handle Input Text",
            field: e.target.name,
            payload: e.target.value,
        });
    }

    return (
        <>
        <h1>Sign Up</h1>
        <label htmlFor="username">Username</label>
        <input type="text" name="userName" value={state.userName} onChange={handleTextChange} id="username"/>
        <label htmlFor="email">E-mail</label>
        <input type="text" name="email" value={state.email} onChange={handleTextChange} id="email"/>
        <label htmlFor="password">Password</label>
        <input name="password" value={state.password} onChange={handleTextChange} type="password" id="password"/>
        <label htmlFor="repeatedPassword">Repeat Password</label>
        <input name="repeatedPassword" value={state.repeatedPassword} onChange={handleTextChange} type="password" id="repeatedPassword"/>
        <button className="btn-primary" disabled={state.buttonDisabled}>Sign Up</button>
        </>
    )
};
export default SignUpPage;

问题原因及修复方案 #

核心问题 #

1. 状态丢失：reducer返回新状态时，仅更新当前输入字段和buttonDisabled，未保留其他字段状态，导致除当前修改字段外的其他状态被清空。
2. 禁用条件不完整：当前仅判断密码是否匹配，未检查所有字段是否非空，不符合需求逻辑。

修复步骤 #

1. 保留完整状态

返回新状态时先展开原有状态，再修改目标字段，避免丢失其他状态：

case "Handle Input Text":
    // 复制原有状态，仅更新当前输入字段
    const newState = { ...state, [action.field]: action.payload };
    // 基于新状态计算按钮禁用状态
    newState.buttonDisabled = !(
        newState.userName.trim() !== "" &&
        newState.email.trim() !== "" &&
        newState.password.trim() !== "" &&
        newState.repeatedPassword.trim() !== "" &&
        newState.password === newState.repeatedPassword
    );
    return newState;

2. 完善禁用条件判断

buttonDisabled的逻辑应为：所有字段非空且密码匹配时，按钮启用（buttonDisabled为false），否则禁用（buttonDisabled为true），因此需要对满足条件的结果取反。

完整修复后的SignUpReducer.js

const initialState = {
    userName: "",
    email: "",
    password: "",
    repeatedPassword: "",
    buttonDisabled: true
}

export const formReducer = (state, action) => {
    switch(action.type) {
        case "Handle Input Text":
            const newState = { ...state, [action.field]: action.payload };
            // 不满足所有条件则禁用按钮
            newState.buttonDisabled = !(
                newState.userName.trim() &&
                newState.email.trim() &&
                newState.password.trim() &&
                newState.repeatedPassword.trim() &&
                newState.password === newState.repeatedPassword
            );
            return newState;
        default: 
            return state;
    }
}

额外优化建议 #

• 给邮箱字段设置type="email"，利用浏览器原生邮箱格式验证。
• 可给密码字段添加长度、复杂度等规则，同步更新判断逻辑增强安全性。

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