[React] onKeyPress 이벤트 (특정 키를 누르면 실행)

onKeyPress는 특정한 키를 눌렀을 경우에 호출하는 이벤트 입니다.

 

키보드의 모든 키가 들어갈 수 있으며 이 키에 대한 부분은 다른 글에서 다루기로 하고

 

onKeyPress 사용방법을 알아 보도록 합시다

class TestReact extends Component {
  constructor(props) {
    super(props);
  }
  render() {
  	return {
      <div>
        <p>숫자 : { this.state.number }</p>
        <input
          type="text"
          name="message"
          onKeyPress = {
            (e) => {
              if (e.key === 'Enter') {
                console.log('Enter Click');
              }
            }
          }
        />
      </div>    
    }
  }
}

위와 같이 사용하시면 됩니다.

 

엔터를 누르면 console창에 Enter Click 이라고 나오게 됩니다!

 

값이 나오길 원한다면 e.target.value를 하시면 됩니다!