如何在Material UI中实现密码输入框的隐藏与显示功能

实现步骤 #

• 新增状态变量控制密码是否可见
• 给TextField组件新增type属性，根据状态动态切换输入框类型为明文text或者密文password
• 在TextField的InputProps属性中配置尾部图标按钮，点击时切换状态变量值

前置依赖 #

需要先引入相关组件和图标，未安装图标依赖可先执行npm install @mui/icons-material安装，也可以用项目内自定义图标替换：

import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';

完整实现代码 #

// 新增密码可见性控制状态
const [showPassword, setShowPassword] = useState(false);
// 切换显隐的处理函数
const togglePasswordVisible = () => setShowPassword(prev => !prev);

// 修改后的TextField组件
<TextField
  className={classes.textf}
  variant="standard"
  placeholder="password"
  type={showPassword ? 'text' : 'password'}
  onChange={(e) => setPassword(e.target.value)} // 修正原代码取输入值的错误写法
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton onClick={togglePasswordVisible} edge="end">
          {showPassword ? <VisibilityOff /> : <Visibility />}
        </IconButton>
      </InputAdornment>
    )
  }}
/>

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