React中使用useState实现密码图标点击显隐功能失效问题

你的代码无法实现多次切换的核心问题在于状态更新逻辑错误：handleclick里直接判断字符串"password"（该值永远为真），导致每次点击都会把输入框类型设为text，无法切回password。

修复后的完整代码：

import React,{useState} from "react";

function Password(){
    const [pass,setPass] = useState("password")

    const handleclick =()=>{
        // 根据当前状态值切换输入框类型
        setPass(prevPass => prevPass === "password" ? "text" : "password")
    }

    return(
        <div>
            Password:<span style={{position:"relative"}}>
                <input type={pass} name="" id="" />
                {/* React中需用className替代class属性 */}
                <i onClick={handleclick} style={{position:"absolute", top:"6px" , right:"5px"}} className="fa-solid fa-eye"></i>
            </span>
        </div>
    )
}

export default Password;

关键修复点：

• 使用函数式状态更新：setPass(prevPass => ...)确保每次更新都能拿到最新的状态值，避免闭包导致的状态偏差
• 修正判断逻辑：对比当前的pass状态值，而不是固定字符串，这样才能实现双向切换
• 替换class为className：这是React元素的属性规范，避免控制台警告

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