Criar Alternância de Senha com React

Introdução

Neste laboratório, aprenderemos como criar um campo de entrada de senha com um botão de alternância que permite aos usuários mostrar ou ocultar sua senha. Isso será feito usando o hook useState() no React. Ao final deste laboratório, você terá uma melhor compreensão de como gerenciar o estado no React e como criar um componente simples, mas útil, para a interação do usuário.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 91%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Alternância Mostrar/Ocultar Senha

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

O código a seguir renderiza um campo de entrada de senha com um botão de revelação. Ele usa o hook useState() para criar a variável de estado shown e definir seu valor inicial como false. Quando o botão "Mostrar/Ocultar" é clicado, a função setShown é chamada, alternando o type da entrada entre 'text' e 'password'.

const PasswordRevealer = ({ value }) => {
  const [shown, setShown] = React.useState(false);
  return (
    <>
      <input type={shown ? "text" : "password"} value={value} />
      <button onClick={() => setShown(!shown)}>Show/Hide</button>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <PasswordRevealer />
);

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Alternância Mostrar/Ocultar Senha. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.