用React编写一个密码组件表单


theme: condensed-night-purple

highlight: atelier-cave-light

背景介绍

我们在使用网站或者应用程序的登录界面或创建帐户界面时,往往避免不了需要用户输入密码这一步骤,而用户是否可以选择看见他们输入的密码是十分重要的一项功能。尤其是在当输入的密码是很长而且包含不同的符号的时候,这一功能就显的尤为重要且好用。但是这一功能如何来实现确实阻碍很多工程师的一个问题。接下来我将带领大家使用React来实现"隐藏/显示"密码这一功能。此功能有很多种样式,例如切换按钮或图标更改。在这里我将选择使用眼睛和删除线的眼睛图标来显示当前是隐藏还是显示。

开始编写组件

首先,我安装并且在项目中引入了一个叫React Icons Kit的图标库并且将这个库里的两个图标导入到了我的 React 组件中:

代码:

js 复制代码
//导入React Icons Kit库
import {Icon} from 'react-icons-kit';
//导入两个图标,分别是(可看/禁止看)
import {eyeOff} from 'react-icons-kit/feather/eyeOff';
import {eye} from 'react-icons-kit/feather/eye'

接下来,我创建了三个states。

  • 第一个states负责管理和存储用户最终设置的密码,初始状态为空字符串。
  • 第二个states是主要负责我们密码的显示状态的,我们设置的初始状态为"password"。它是我们的受控表单在页面中的接受的密码是否显示的判断依据。
  • 第三个states负责的是是图标的变化,我们组件的默认初始状态是"eyeOff"图标,因为我们希望我们用户的密码最初是被隐藏的。

代码:

js 复制代码
const [password, setPassword] = useState("");
const [type, setType] = useState('password');
const [icon, setIcon] = useState(eyeOff);

然后我创建了一个函数来处理隐藏密码(eyeOff 图标)和显示密码(眼睛图标)之间的切换:

代码:

js 复制代码
const handleToggle = () => {
   if (type==='password'){
      setIcon(eye);
      setType('text')
   } else {
      setIcon(eyeOff)
      setType('password')
   }
}

这个 handleToggle 函数负责的功能是:当type=password时,它会把图标设置为睁眼图标(setIcon(eye))并以文本形式显示密码(setType('text')),当类型为其他任何类型时,它会将图标设置为闭眼图标setIcon(eyeOff)并隐藏密码setType('password')

现在主要的"隐藏/显示"密码这一功能的逻辑已经写好了,我们要在页面上呈现密码和切换隐藏/显示功能。在我们的react组件中返回。

代码:

js 复制代码
return (
     <div>
        <div>
           <div class="mb-4 flex">
              <input
                  type={type}
                  name="password"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  autoComplete="current-password"
             />
             <span class="flex justify-around items-center" onClick={handleToggle}>
                  <Icon class="absolute mr-10" icon={icon} size={25}/>
              </span>
            </div>
         </div>
      </div>
); 

我使用 Tailwind CSS 框架来设置图标位置的样式,以便图标位于密码输入范围内。

最终效果

这是带有隐藏密码的 eyeOff 图标的表单外观:


这是带有显示密码的眼睛图标的表单外观:

相关推荐
拾光拾趣录3 分钟前
虚拟DOM
前端·vue.js·dom
爱学习的茄子3 分钟前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神4 分钟前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao6 分钟前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风7 分钟前
JS执行机制-event loop
javascript
止观止7 分钟前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript
摆烂为不摆烂8 分钟前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端
1024小神9 分钟前
cocos游戏开发中,如何制作一个空气墙
前端·javascript
爱编程的喵9 分钟前
深入理解JavaScript事件循环机制:从同步到异步的完整解析
前端·javascript
202610 分钟前
11. vite打包优化
前端·javascript·vite