在反应js中显示隐藏多个密码

Question

我目前正在学习 React js。当它有一个显示隐藏密码时，我的代码工作。但是当我有不止一个时，我就会挣扎。此代码有效，因为它只有一个。

export default function App() {
  const [changePassword, setChangePassword] = useState(true);
  const changeIcon = changePassword === true ? false : true;

  return (
  <div className="wrapper-login">
     <div className="wrapper-form">
        <h2>Welcome Back!</h2>
        <form>
           <label>Email</label>
           <div>
              <input
                 type="email"
                 name="email"
                 required
              />
           </div>
           <label>Password</label>
           <div className="form-group">
              <input
                 type={changePassword ? "password" : "text"}
                 name="password"
                 required
              />
              <span className="icon"
                 onClick={() => {
                    setChangePassword(changeIcon);
                 }}
              >
                 {changeIcon ? <EyeOutlined /> : <EyeInvisibleOutlined />}
              </span>
           </div>
        </form>
     </div>
  </div>
);
}

在codesandbox我有3个输入类型的密码，每个输入都有显示隐藏密码。你能帮我实现吗？并向我解释为什么这是有效的？ .我很抱歉我的英语不好。谢谢

Answer 1

您可以创建一个组件来控制隐藏或显示行为。例如，您可以为独立的显示隐藏行为创建一个通用组件。您传递输入名称，它会为您创建一个 sub-component。

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>

Answer 2

当您对不止一件事使用一种状态时，状态更改将影响使用该状态的所有元素。最好的方法是创建一个可重用的输入组件，并将其导入到任何地方，随心所欲。通过这种方式，所有更改都将仅在该组件内部发生，不会影响其他组件

如果您想访问输入 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>

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

在反应js中显示隐藏多个密码

Show hide multiple password in react js

show-hide

reactjs

react-hooks