如何使用Material UI和React Hook Forms隐藏/取消隐藏密码

问题描述

很抱歉，这个问题可能很愚蠢，但我正在学习，但无法解决。我从material-ui中获取了注册模板，并决定使用react hook形式执行验证，但是一切正常，但是我想添加用眼睛图标显示或隐藏密码的功能，事实证明，当我设法这样做时，它将字段类型从“文本字段”更改为“ FormControl”，但它们不再显示我出现错误时的帮助消息。

在代码中有2个密码字段，第一个按我的要求工作，但没有隐藏/取消隐藏，第二个有图标，但正如我提到的那样，它不显示消息。

让我震惊的是出现错误时它会正确变成红色。

如果您能帮助我使其正常运行，我将不胜感激。谢谢

import React,{useState} from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import InputAdornment from '@material-ui/core/InputAdornment';
import IconButton from '@material-ui/core/IconButton';
import FormControl from '@material-ui/core/FormControl';
import clsx from 'clsx';
import InputLabel from '@material-ui/core/InputLabel';
import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers';
import { useForm} from "react-hook-form";
import { OutlinedInput } from '@material-ui/core';

function copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),display: 'flex',flexDirection: 'column',alignItems: 'center',},avatar: {
    margin: theme.spacing(1),backgroundColor: theme.palette.secondary.main,margin: {
    margin: theme.spacing(1),form: {
    width: '100%',// Fix IE 11 issue.
    marginTop: theme.spacing(3),submit: {
    margin: theme.spacing(3,2),}));

const RegisterSchema = yup.object().shape({
    password: yup
    .string()
    .trim()
    .required('Requerido.') 
    .min(8,'Contraseña es muy corta - Debe contener al menos 8 caracteres.')
    .max(15,'Contraseña es muy larga - Debe contener máximo 15 caracteres.')
    .matches(/[a-zA-Z]/,'Contraseña solo puede contener letras latinas.')
});

export default function SignUp() {
  
  const classes = useStyles();

  const [data,setData] = useState({
    password:'',showPassword: false,});
     
  const handleChange = (prop) => (event) => {
    setData({ ...data,[prop]: event.target.value });
  };

  const handleClickShowPassword = () => {
    setData({ ...data,showPassword: !data.showPassword });
  };

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };

  const handleInputChange = (e) => {
    console.log(e.target.value);
    setData ({
      ...data,fullName: (data.firstName + ' ' + data.lastName),[e.target.name] : e.target.value,})
  }
  
  const {register,handleSubmit,errors} = useForm({
    resolver: yupResolver(RegisterSchema),});
  
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Registro
        </Typography>
        <form className={classes.form} novalidate onSubmit={handleSubmit(onSubmit)}>
          <Grid container spacing={2}>
            {<Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="Contraseña"
                type="password"
                id="password"
                autoComplete="current-password"
                onChange={handleInputChange}
                inputRef={register}
                error ={!!errors.password}
                helperText={errors.password ? errors.password.message : ''}
                endAdornment={
                  <InputAdornment position="end">
                    <IconButton
                      aria-label="toggle password visibility"
                      onClick={handleClickShowPassword}
                      onMouseDown={handleMouseDownPassword}
                      edge="end"
                    >
                      {data.showPassword ? <Visibility /> : <VisibilityOff />}
                    </IconButton>
                  </InputAdornment>
                }
              />
            </Grid>}

          <FormControl 
            className={clsx(classes.margin,classes.textField)} 
            variant="outlined" 
            autoComplete="current-password"
            inputRef={register}
            error ={!!errors.password}
            helperText={errors.password ? errors.password.message : ''}
            name="password"
            type="password"
            id="password"
            fullWidth
            required
            >
            <InputLabel 
              htmlFor="outlined-adornment-password">
              Contraseña
            </InputLabel>
            <OutlinedInput
              id="outlined-adornment-password"
              type={data.showPassword ? 'text' : 'password'}
              value={data.password}
              onChange={handleChange('password')}
              endAdornment={
                <InputAdornment position="end">
                  <IconButton
                    aria-label="toggle password visibility"
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                    edge="end"
                  >
                    {data.showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
              }
              labelWidth={92}
            />
          </FormControl>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Registrate
          </Button>
          <Grid container justify="flex-end">
            <Grid item>
              <Link href="#" variant="body2">
                ¿Tienes una cuenta? Ingresa
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={5}>
        <copyright />
      </Box>
    </Container>
  );
}

解决方法

在您的密码文本字段组件中

您可以使用此解决方案，尝试在组件中添加一些状态，以定义用户是否要显示或隐藏密码并将其命名为“ showPassword”

const [showPassword,setShow] = useState(false)

     <TextField
       variant="outlined"
       required
       fullWidth
       name="password"
       label="Contraseña"
       type={showPassword?"text":"password"}
    
     />

当用户单击“眼睛”按钮时调用setShow（！showPassword）

现在，当setShow更改为“ true”时，输入的类型将为文本，因此将显示密码