使用 React 创建密码切换功能

简介

在本实验中，我们将学习如何创建一个带有切换按钮的密码输入字段，该按钮允许用户显示或隐藏密码。这将使用 React 中的 useState() 钩子来完成。在本实验结束时，你将更好地理解如何在 React 中管理状态，以及如何创建一个简单而有用的用户交互组件。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 91%。获得了学习者 100% 的好评率。

显示/隐藏密码切换

VM 中已提供 index.html 和 script.js。一般来说，你只需在 script.js 和 style.css 中添加代码。

以下代码呈现了一个带有显示按钮的密码输入字段。它使用 useState() 钩子创建 shown 状态变量，并将其初始值设置为 false。当点击“显示/隐藏”按钮时，会调用 setShown 函数，在 'text' 和 'password' 之间切换输入的 type。

const PasswordRevealer = ({ value }) => {
  const [shown, setShown] = React.useState(false);
  return (
    <>
      <input type={shown ? "text" : "password"} value={value} />
      <button onClick={() => setShown(!shown)}>Show/Hide</button>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <PasswordRevealer />
);

请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了“显示/隐藏密码切换”实验。你可以在 LabEx 中练习更多实验来提升你的技能。