React注册页Confirm Password输入框默认值异常，如何设为null显示占位符？

问题根源 #

你遇到的确认密码字段加载时显示false掩码（星号形式），核心原因是**cnfrmPassword状态的初始值被设为了布尔值false**。React受控输入框会自动把布尔值false转换为字符串"false"，密码框用星号掩码显示这个字符串，就出现了不符合预期的内容。

正确解决方案 #

不要直接移除value={cnfrmPassword}或设为null（这会让输入框变成非受控组件，不符合React受控组件的最佳实践），而是修改状态的初始值：

将状态初始化代码从：

const [cnfrmPassword, setCnfrmPassword] = useState(false);

改为：

const [cnfrmPassword, setCnfrmPassword] = useState('');

原因说明 #

• 受控组件的value属性应该接收字符串（或null）类型的值。设为布尔值false时，React会转成字符串"false"，密码框掩码显示后就成了一串星号。
• 初始化为空字符串''后，输入框会正确显示预设的占位符，同时保持受控组件特性，后续输入也能正常通过setCnfrmPassword更新状态。

额外检查点 #

如果修改初始值后仍有问题，确认两点：

• 确认确认密码输入框的placeholder属性已正确设置
• 排查是否有组件挂载时的逻辑，意外将cnfrmPassword设为false

内容的提问来源于stack exchange，提问作者Ashish Kumar