onKeyUp , onClick, KeyCode13

태민·2022년 11월 17일
0

아주간단한 예제를 통해서

onKeyUp도 사용해보고

onClick도 사용해보고

keyCode13이라는 것을 이용해서 클릭하지 않고 엔터만눌러서

submit을 해보자

일단 예제코드는 아래와 같다

import React from "react";

function App() {


  const onSubmit =()=> {
    alert('submitted');
  }

  const onKeyUp= (e)=> {
    if(e.keyCode === 13){
      onSubmit();
    }
    
  }


  return (
    <div className="App">

    <input onKeyUp={onKeyUp}/>
    <button onClick={onSubmit}>Submit</button>
    </div>
  );
}

export default App;

이벤트 e를 괄호안에 넣어주고

e.keycode===13 이라고 주면

13이 엔터를 뜻함으로

클릭버튼을 누르지않아도

엔터만 쳐도 submit이 발동되도록 하는 예시이다

위에서 써밋 함수를 먼저 만들어주고 얼랏을 띄우는데

아래에서 onKeyUp 함수를 만들고

그 함수 안에 OnSubmit을 넣어주면 된다

profile
몰입이 즐거운 개발자

0개의 댓글