Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步