在ReactJS中屏蔽密码输入

Question

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

keydown在将字符存储在列表或这些行中的某些内容时，读取每个事件并用点替换文本是否可行？

Answer 1

嗯，实现此目标的方法大部分是在JSX / HTML中或在CSS中。

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

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

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

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

Answer 2

我只是简单地调节输入类型。

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

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

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