React Input - 显示密码框内容

2019-09-16

描述

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

• 使用 React.useState() hook 创建一个 shown 状态变量并设置他的值为 false
• 将 <input> 和 <button> 元素包裹在一个 <div> 中，通过按钮对输入框的 "text" 和 "password" 类型进行切换

实现

function PasswordRevealer({ value }) {
  const [shown, setShown] = React.useState(false);

  return (
    <div>
      <input type={shown ? 'text' : 'password'} value={value} onChange={() => {}} />
      <button onClick={() => setShown(!shown)}>Show/Hide</button>
    </div>
  );
}

使用

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

返回总目录

每天 30 秒系列之 React