您可以创建一个控制隐藏或显示行为的组件。例如，您可以为孤立的显示隐藏行为创建一个通用组件。您传递输入名称，它将为您创建一个子组件。

export default function ShowHidePassword({ name }) {
  const [isVisible, setVisible] = useState(false);

  const toggle = () => {
    setVisible(!isVisible);
  };

  return (
    <div className="form-group">
      <input type={!isVisible ? "password" : "text"} name={name} required />
      <span className="icon" onClick={toggle}>
        {isVisible ? <EyeOutlined /> : <EyeInvisibleOutlined />}
      </span>
    </div>
  );
}

用法：

<div>
  <ShowHidePassword name="name" />
  <ShowHidePassword name="password" />
</div>

当你为多个事物使用一个状态时，状态的改变会影响所有使用该状态的元素。最好的方法是创建一个可重用的输入组件，并将其导入到任何你想要的地方。通过这种方式，所有的改变都会发生在该组件内部，而不会影响其他组件。
如果你想访问输入onChange，name和...，不要忘记传递...props到你的输入。

export const PasswordInput = (props) => {
  const [hide, setHide] = useState(false);

  const toggle = () => {
    setHide((prev) => !prev);
  };

  return (
    <div>
      <input type={!isVisible ? "password" : "text"} {...props} required />

      <i className="icon" onClick={toggle}>
        {hide ? <EyeVisible /> : <EyeInvisible />}
      </i>
    </div>
  );
}

用法：

<div>
<PasswordInput />
<PasswordInput />
<PasswordInput />
</div>

现在每一个切换将只影响点击的输入，没有副作用和重新渲染

这里是可重复使用的密码隐藏显示组件。

import React from 'react'
import { useState,useEffect } from 'react';

const PasswordShowInput = ({name,disabled,value,setValue}) => {
    const [show, setShow] = useState(false);

    const onShow = (e)=>{
        e.preventDefault();
        setShow(!show)
    }

    useEffect(() => {
      setShow(false)
      return () => {
        setShow(false)
      };
    }, [disabled]);

  return (
 <div className='showpassword'>
        <input disabled={disabled}  name={name} type={show && !disabled?"text":"password"} value={value} onChange={e=>setValue(e.target.value)}/>
        {!disabled?<p onClick={onShow}><i class={!show?"fa-solid fa-eye":"fa-solid  fa-eye-slash"}></i></p>:null}
    </div>
  )
}

export default PasswordShowInput

用法

<PasswordShowInput disabled={false} name="password" value={password} setValue={setPassword}/>