[React] Enter 이벤트

안녕하세요.

React에서 Enter 이벤트 설정하는 방법에 대하여 알아보겠습니다.

 

keyCode를 이제는 안 쓰는 것으로 알고 있지만, 아직 사용하는 곳도 있을 수 있기 때문에 2개다 작성하였습니다.
keyCode는 필요 없으면 삭제하셔도 무방합니다.

 

onKeyPress는 이제 사용하지 않으므로 onKeyDown으로 구현하겠습니다.

 

EnterTest.jsx

• 아이디를 입력하는 input 창에서 커서를 두고 Enter를 입력하면 이벤트가 발생합니다.

export default function EnterTest() {
  const onSubmitEnter = (e) => {
    // if(e.key === 'Enter' || e.keyCode === 13) {
    if(e.key === 'Enter') {
      // 엔터 키 입력 후 발생하는 이벤트 작성
      console.log('enter 입력');
    }
  };

  return (
    <div>
      <form>
        <input type='text' name='id' placeholder='아이디를 입력해주세요' onKeyDown={onSubmitEnter} />
      </form>
    </div>
  )
}

 

감사합니다.