web-dev-qa-db-fra.com

Comment afficher le mot de passe à partir du champ de texte de l'interface utilisateur matérielle?

Mon code fonctionne correctement et lorsque j'écris dans le champ du mot de passe, le texte est masqué. Existe-t-il un moyen d'ajouter une fonctionnalité où l'utilisateur a la possibilité d'afficher le mot de passe s'il le souhaite?

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
          <div>
         <div className='main-content'>
         <form className="form" noValidate autoComplete="off">
                {[{ label: "Email", state: email , type: "text", function: setEmail},
                { label: "Password", state: password , type: "password", function: setPassword},
                  ].map((item, index) => (
                  <div>
                    <TextField
                      id="outlined-basic"
                      key={index}
                      label={item.label}
                      variant="outlined"
                      type= {item.type}
                      onChange= {e => item.function(e.target.value)}        
                    />
                    <br></br><br></br>
                  </div>
                )
                )}
         </form>
         </div>
       </div>
        );
      }
javascripthtmlreactjstypescriptmaterial-ui
3
x89

Vous pouvez ajouter un bouton "Afficher" à côté du champ de mot de passe en sélectionnant le type d'entrée qui change de type=password à type=text.

1
Arpitha Chandrashekara

Eh bien, je suppose que quelque chose comme ça. Cela ne fonctionnera pas bien avec plusieurs champs de mot de passe.

const [showPassword, setShowPassword] = useState(false);

const handleClick = () => {
  setShowPassword(prev => !prev);
}

return (
  <form className="form" noValidate autoComplete="off">
    {[
      { 
        label: "Email",
        state: email,
        type: "text",
        function: setEmail
      },
      {
        label: "Password", 
        state: password, 
        type: "password", 
        function: setPassword,
      },
     ].map((item, index) => (
       <div>
         <TextField
           InputProps={{
             endAdornment: item.type ? 'password' (
               <InputAdornment position="end">
                  <IconButton
                    onClick={handleClick}
                    Edge="end"
                  >
                    {showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
             ) : null
           }}
           id="outlined-basic"
           key={index}
           label={item.label}
           variant="outlined"
           type={showPassword ? 'text' : item.type}
           onChange= {e => item.function(e.target.value)}        
         />
         <br></br><br></br>
       </div>
      ))
    }
</form>
1
Ioannis Potouridis

Ajoutez une fonction sur un clic btn "show-pwd". Effectuez les tâches ci-dessous:

  1. obtenir la valeur actuelle du champ de mot de passe.
  2. définir le champ de type de mot de passe de "mot de passe" à "texte"
  3. définissez la valeur du champ de mot de passe sur la valeur que vous avez récupérée (cela peut être obligatoire ou non)
0
Ashutosh