[TIL] 2023.11.10 - enter 눌러서 로그인하기

 enter 눌러서 로그인하기 

// useRef 사용
import { useRef } from "react";

export default function LoginPage() {
  const loginButtonRef = useRef();
  
  
// 사용자가 Enter 키를 눌렀을 때 로그인 실행하는 함수
  const handleEnterKey = (event) => {
    if (event.key === "Enter") {
      loginButtonRef.current.click();
    }
  }
}


// onKeyPress 추가하기
return (
<div>
  <input
    type="text"
    value={email}
    onChange={onChangeEmailHandler}
    onKeyPress={handleEnterKey}
    placeholder="이메일을 입력해주세요."
  />
  <input
    type="password"
    value={password}
    onChange={onChangePasswordHandler}
    onKeyPress={handleEnterKey}
    placeholder="비밀번호를 입력해주세요."
  />
</div>;


// loginButtonRef 연결
<div
    ref={loginButtonRef}
    onClick={onClickLoginHandler}
  ></div>
)