Эффект выделения границы компонента логина при клике на инпут

В этой статье я расскажу о том, как можно создать эффект выделения границы компонента логина при клике на инпут. Это может быть полезно для улучшения взаимодействия с пользователем и повышения визуальной привлекательности приложения.

import React, { useState } from react;import { TransitionGroup, CSSTransition } from react-transition-group;import styled from styled-components;const LoginFormStyle = styled.form  display: flex;  flex-direction: column;;const BorderHighlightStyle = styled(LoginFormStyle)  border: 2px solid red;;const TransitionStyle = styled.div  transition: all 0.3s ease-out;;function LoginForm() {  const  = useState(false);  function handleClick(event) {    setIsBorderHighlighted(!isBorderHighlighted);  }  return (    ...    <input      type="text"      name="username"      onClick={handleClick}    />    ...  );}

Мы создали переменную isBorderHighlighted, которая будет хранить состояние компонента. Значение этой переменной будет определять, выделена ли граница компонента или нет. Мы также создали функцию handleClick, которая будет изменять значение этой переменной при клике на инпут.

Протестируем работу компонента. Когда вы будете нажимать на инпуты, граница компонента будет выделяться красным цветом на 0,3 секунды.