반응형
과제테스트 리액트
-
[Input 이벤트] 포커스 이벤트, 영역 외부 클릭시 상태 변화, document.addEventListenerReact/과제 테스트 2023. 8. 8. 18:53
과제 테스트 준비 input 태그와 관련되어서 좀 더 심도있게 준비를 하게 되었다. 🐇 포커스 이벤트 유저가 input 태그를 클릭하면 아래 키패드가 떠야 한다. 1. 키패드 가시성 여부를 state로 관리한다. const [IsOpenPasswordKeypad, setIsOpenPasswordKeypad] = useState(false); 2. 두 개의 같은 동작을 이용할 예정으로 키패드는 컴포넌트로 생성한다. const displayKeypad = (type: InputType) => { return ( {Array.from({ length: 10 }, (_, i) => ( handlePasswordChange(type, i)} > {i} ))} 9 * ); }; 3. div 클릭 / focus일때 ..