在 ReactJS 中屏蔽密码输入

Question

我正在使用 ReactJS 构建登录页面。我正在使用内部构建的自定义文本组件，但不幸的是，它没有密码屏蔽选项。不能选择将 <input> 标签与 type=password 一起使用。如何使用 Javascript/JQuery 使我的密码字段显示为屏蔽（点而不是文本）？

读取每个 keydown 事件并在将字符存储在列表或那些行上的内容时用点替换文本是否是一个可行的选择？

原文由 koolkat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好吧，实现这一点的方法大部分是在您的 JSX/HTML 或 CSS 中。

要使用 JSX 或 HTML 实现此目的，您可以使用：

 <input type="password" name="password">

要使用 CSS 实现此目的，您可以使用：

 -webkit-text-security: disc;
text-security: disc;

原文由 FluffySamurai 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我会简单地调节输入类型。

 <input type={show_input?'text':'password'}
       name='password'
       id='password'
       value={user.password}
       onChange={handleChange}
 />

在 onChange 函数中更改 show_input 的值或添加一个按钮，将 shouw_input 更改为 true 或 false。

当类型是密码时，它会被屏蔽，当它是文本时，它会被取消屏蔽。

原文由 Carlos Zapata 发布，翻译遵循 CC BY-SA 4.0 许可协议