有没有办法在 React 中使用密码隐藏输入值？

Question

我有此输入代码，类型为“密码”

<input
  type="password"
  id="password"
  value={form.password}
  onChange={handlePasswordChange}
/>

有效，但我注意到，在开发人员控制台“Elements”中，您实际上可以看到密码字段的值：

<input type="password" class="form-control undefined" value="qwerty">

这样显示密码可以吗？有没有办法隐藏它？我应该使用不受控制的组件而不是受控制的组件吗？

Answer 1

type="password" 只是美观地隐藏了密码。输入值始终可以通过 JS 访问（使用它的 .value 属性）。因此，当有人打开 DevTools 时，他或她无论如何都可以获取密码。

Is there a way to hide value from input with password in React?