在 React 中隐藏/显示密码

在登录或创建网站或应用程序帐户时，让用户能够看到自己的密码非常有用，尤其是在密码很长且包含不同符号的情况下。我在 Flatiron School 的 React 前端毕业设计项目中实现了这个显示/隐藏密码的功能。此功能有很多变体，例如切换按钮或图标更改。我选择在我的网站上使用眼睛图标和带删除线的眼睛图标。

首先，我安装了 React Icons Kit 库，并将该库和两个图标导入到我的 React 组件中：



import {Icon} from 'react-icons-kit';
import {eyeOff} from 'react-icons-kit/feather/eyeOff';
import {eye} from 'react-icons-kit/feather/eye'

接下来，我创建了三个状态。第一个状态用于管理并最终设置用户的密码，初始状态为空字符串。第二个状态用于设置类型，初始状态为“password”。这将在受控表单中用于在页面上呈现密码。最后一个状态用于设置图标，初始状态设置为“eyeOff”图标，因为我们希望用户的密码最初处于隐藏状态：



const [password, setPassword] = useState("");
const [type, setType] = useState('password');
const [icon, setIcon] = useState(eyeOff);

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



const handleToggle = () => {
   if (type==='password'){
      setIcon(eye);
      setType('text')
   } else {
      setIcon(eyeOff)
      setType('password')
   }
}

这个handleToggle函数的意思是：当类型等于“密码”时，将图标设置为睁眼图标并以文本形式显示密码，当类型为其他类型时，将图标设置为闭眼图标并隐藏密码。

现在逻辑已经完成，我们想要在页面上渲染密码以及切换隐藏/显示功能。在返回代码中：



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 框架来设置图标的位置，以便图标位于密码输入内。

这是带有眼睛图标且密码隐藏的表单的外观：这是带有眼睛图标且显示密码的表单的外观：

就是这样！我原本以为这个功能会非常难实现，但惊喜的是，它实现起来非常简单。希望这个教程对你有帮助！

鏂囩珷鏉ユ簮锛�https://dev.to/annaqharder/hideshow-password-in-react-513a