在react 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

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

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>

现在，每个切换都只对点击的输入有效，没有副作用，并重新渲染

Answer 3

这里是可恢复的密码隐藏显示组件。

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}/>