[React] 엔터('Enter')키를 눌렀을때 클릭 이벤트 호출하는 방법

프로젝트를 할때 편의성으로 자주 추가해달라는 요청 중 하나가 엔터키를 눌렀을때 (조회 등의) 버튼을 클릭되게 하는 것이라서 적어둡니다.

 

해당 소스의 핵심은 이벤트의 키값이 엔터('Enter')키와 일치할 때 클릭이벤트를 호출한다는 것입니다.

 

(소스생략) ...   const onClick = () => {  // 클릭 했을때 실행할 소스 추가  alert("버튼의 클릭 효과"); };   const onKeyPress = (e) => {  if(e.key == 'Enter') {    onClick();  } }   return (    <>       <input value='' onKeyPress={onKeyPress} />       <button onClick={onClick}>추가</button>    </> );   ... (소스생략)

 

참고 : [책] 리액트를 다루는 기술 4장

 

 

※ 소스를 적용한 참고파일을 첨부하였습니다.

   내용 : key값을 이용하여 데이터를 추가 또는 제거하는 프로그램

 

App.js

0.00MB

IterationSample.js

0.00MB