显示/隐藏密码切换

渲染一个带有显示/隐藏按钮的密码输入框。

• 使用 useState() 钩子创建 shown 状态变量，并将其初始值设为 false。
• 当点击 <button> 时，执行 setShown，在 <input> 的 type 属性的 'text' 和 'password' 之间切换。

const PasswordRevealer = ({ value }) => {
  const [shown, setShown] = React.useState(false);
  return (
    <>
      <input type={shown ? 'text' : 'password'} value={value} />
      <button onClick={() => setShown(!shown)}>显示/隐藏</button>
    </>
  );
};

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