Создайте переключатель пароля с использованием React

Введение

В этом практическом занятии мы научимся создавать поле ввода пароля с кнопкой переключения, которая позволяет пользователям показывать или скрывать свой пароль. Для этого мы будем использовать хук useState() в React. В конце практического занятия вы будете лучше понимать, как управлять состоянием в React и как создавать простой, но полезный компонент для взаимодействия с пользователем.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 91%. Он получил 100% положительных отзывов от учащихся.

Переключатель показа/скрытия пароля

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

Следующий код отображает поле ввода пароля с кнопкой показа. Он использует хук useState(), чтобы создать переменную состояния shown и установить ее начальное значение в false. Когда нажимается кнопка Show/Hide, вызывается функция setShown, которая переключает type ввода между 'text' и '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 />
);

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по переключателю показа/скрытия пароля. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.