在 React Hooks 中通过切换按钮显示/隐藏密码
构建注册/登录表单时，如果能实现用户查看当前输入值的功能就太好了。用 React 实现起来非常简单，让我们一起来看看吧。
npm i react-hook-form
我们将安装react-hook-form来进行一些基本的验证。并使用Font Awesome 图标来添加一些漂亮的眼睛图标。
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome
现在我们来创建一个组件，一个简单的表单，包含两个输入框和一个提交按钮。
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye } from "@fortawesome/free-solid-svg-icons";
const eye = <FontAwesomeIcon icon={faEye} />;
export default function App() {
const { register, handleSubmit } = useForm();
const onSubmit = data => {
console.log(data);
};
return (
<div className="App">
<input
name="username"
type="text"
placeholder="Username"
ref={register({ required: "This is required." })}
/>
<div className="pass-wrapper">
<input
placeholder="Password"
name="password"
type="password"
ref={register({ required: "This is required." })}
/>
<i>{eye}</i>
</div>
<button type="submit" onClick={handleSubmit(onSubmit)}>
Submit
</button>
</div>
);
}
并添加一些 CSS，以获得更美观的外观。
.App {
display: flex;
flex-direction: column;
text-align: center;
justify-items: center;
font-size: 22px;
max-width: 500px;
min-height: 672px;
margin: 0 auto;
border-radius: 25px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
}
.App > input {
margin-top: 200px;
}
input {
margin: 0 auto;
background-color: black;
opacity: 50%;
color: white;
margin-top: 10px;
width: 300px;
height: 59px;
font-size: 22px;
margin-bottom: 14px;
max-width: 527px;
padding: 0 10%;
}
.pass-wrapper {
position: relative;
display: flex;
margin-bottom: 14px;
}
i {
position: absolute;
top: 38%;
right: 16%;
}
i:hover {
color: #00fcb6;
cursor: pointer;
}
button {
width: 300px;
height: 50px;
margin: 0 auto;
}
组件现在看起来像这样
现在让我们添加一些布尔值状态来跟踪当前密码字段视图
const [passwordShown, setPasswordShown] = useState(false);
以及切换值的功能
const togglePasswordVisiblity = () => {
setPasswordShown(passwordShown ? false : true);
};
让我们给眼睛图标添加 onClick 事件处理程序，顺便说一下，你可以在项目中使用任何其他图标或按钮来实现此功能。
<i onClick={togglePasswordVisiblity}>{eye}</i>
最后，我们将根据应用程序的当前状态来更改输入类型。
<input
...
type={passwordShown ? "text" : "password"}
...
/>
好了，现在我们可以点击眼睛图标来更改当前密码占位符的显示方式。如果您想查看所有代码，请点击此 CodeSandbox 链接：显示/隐藏密码切换开关。
如果本教程对您有帮助，请点个赞！