React中多密码输入框的显示/隐藏功能实现与常见错误解析

<input
    type={values.showPassword ? "text" : "passwordConf"} // 错误点
    onChange={passwordChange("passwordConf")}
    value={values.passwordConf} id="signup-password-confirm"
    placeholder="CONFIRM PASSWORD"
/>

import React from "react";

function ShowHidePassword(){
    // 使用useState管理两个密码字段的值和显示/隐藏状态
    const [values, setValues] = React.useState({
        password: "",
        passwordConf: "",
        showPassword: false, // 初始状态通常设置为隐藏密码
    });

    // 切换密码显示/隐藏状态的事件处理函数
    const clickShowPassword = (event) => {
        setValues({ ...values, showPassword: !values.showPassword });
        event.preventDefault(); // 阻止按钮的默认行为，例如表单提交
    };

    // 处理密码输入框值变化的通用函数
    const passwordChange = (prop) => (event) => { 
        setValues({ ...values, [prop]: event.target.value }); 
    };

    // 阻止鼠标按下事件的默认行为，防止按钮在点击时失去焦点
    const mouseDownPassword = (event) => { 
        event.preventDefault(); 
    };

    return (
        <div>
            {/* 第一个密码输入框 */}
            <input
                // 根据showPassword状态动态设置type为"text"或"password"
                type={values.showPassword ? "text" : "password"}
                onChange={passwordChange("password")}
                value={values.password} 
                id="signup-password"
                placeholder="PASSWORD"
            />
            <br /> {/* 添加换行以提高可读性 */}

            {/* 第二个确认密码输入框 */}
            <input
                // 同样根据showPassword状态动态设置type为"text"或"password"
                type={values.showPassword ? "text" : "password"} // 修正点：应为"password"
                onChange={passwordChange("passwordConf")}
                value={values.passwordConf} 
                id="signup-password-confirm"
                placeholder="CONFIRM PASSWORD"
            />
            <br/>

            {/* 显示/隐藏密码按钮 */}
            <button 
                className="hide-password2" 
                onClick={clickShowPassword} 
                onMouseDown={mouseDownPassword}
            >
                {/* 根据showPassword状态显示不同的图标 */}
                {values.showPassword === false ? <i className="bi bi-eye-slash"></i> : <i className="bi bi-eye"></i> } 
                {" "}Show Password
            </button>
        </div>
    );
}

export default ShowHidePassword;