当我在React Js中使用useState来显示密码并隐藏图标时，单击有不起作用吗？

Question

import React,{useState} from "react";


function Password(){

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


    const handleclick =()=>{
        setPass(("password")? "text" : "password")
    
    }
    return(
        <div>
            Password:<span style={{position:"relative"}}><input type={pass} name="" id="" />
            <i onClick={handleclick} style={{position:"absolute", top:"6px" , right:"5px"}} class="fa-solid fa-eye"></i></span>
        </div>
    )
}

export default Password;

当我在 React Js 中使用 useState 来显示密码并隐藏图标时，单击按钮不起作用。我只显示一次密码，但每次单击图标时我都需要显示和隐藏它

Answer 1

import React,{useState} from "react";

function Password(){
    const [pass,setPass] = useState(true);
    return(
        <div>
            Password:
            <span style={{position:"relative"}}>
                // input
                <input type={pass?'password':'text'} name="" id="" />
                //icon
                <i onClick={()=>setPass(!pass)} 
                style={{position:"absolute", top:"6px" , right:"5px"}} 
                className="fa-solid fa-eye"></i>
            </span>
        </div>
    )
}
export default Password;