React : input 과 button을 만들어 Enter엔터키로 값을 불러와보자

Enter 키? onkeypress 

on keypress 사용해보기

오늘은 내가 개발하고 싶은 부분을 블로그에 적어보려고 한다.

---

 

📙 개발하고 싶은부분

인풋과 버튼이 있을때 해당 내용을 추가버튼을 누르는게 아닌

엔터를 누르면 적용이 되도록 하고 싶다.

---

구글링을 해보니 onkeypress 라는 함수를 이용하여 간단히 해결이 가능했다.

사용하는 방법은 아래와 같다.

  const onkeypress =(e)=>{
    if(e.key == 'Enter'){
      clickchange()
    }
  }
 
 
 <input onKeyPress={onkeypress} onChange={(e)=>{
        입력값변경(e.target.value)
      }} type="text" ></input>

 

1. input 에 onKeyPress를 적어준다.

2. const okeypress에는 (e)이벤트 값을 받는데 

만약에 이 이벤트가  Enter 라면? clickchange( ) 라는 함수를 실행하라는 것이다.

 

 

여기서 clickchange( )는어디서 나온건지 코드를먼저 보겠다.

 const clickchange = ()=>{
    let copy = [...글제목]
    copy.unshift(입력값)
    글제목변경(copy)
  }
  
   <button onClick={clickchange}>추가</button>

button에 onClick을 했을때 함수를 주었고 clickchange( ) 이 함수는 

내가 input에 입력한 값을 화면에 나타내주는 코드로 짜여져 있다.

위에서 엔터를 눌렀을때 clickchange( ) 가 실행이 되도록 코드를 짯으니 개발 완성이다.