onKeyDown이벤트

천문성·2023년 2월 5일
1
TodoContainer.js
const handelCheckEnter = (e) =>{
    if(e.key === 'Enter' && e.nativeEvent.isComposing===false){
      handleClickAddBtn()
    }
  }

AddBtn.js
<input className='addInput'
      placeholder="할일 입력"
      onChange={(e) => {
        setAddlist(e.target.value);
      }}
      onKeyDown={onCheckEnter}
      
    />

엔터키 입력시 리스트추가 기능 구현 시
onKeyPress를 사용하니 줄이 그어져있어 검색한 결과 더이상 지원하지 않아서 추후 문제가 될수있다는 내용이 있었음
=>onKeyDown이벤트 사용

onKeyDown이벤트를 사용하니 영어는 제대로 입력되는데 한글입력시 두번 입력되는 상황이 발생함

검색결과: 한글은 조합문이라 '이' 에서 '인, 임'등으로 변화할수있어 단어가 끝난지 알수가없어서 이벤트가 두번 발생함
따라서 keyDown을 쓰고 event.nativeEvent.isComposing()도 사용해야한다. event.nativeEvent.isComposing()은 boolean값으로만 읽히기때문에 이벤트가 두번 발생하는걸 방지하기 위해서는 false값을 줘야함

profile
프론트엔드 공부

0개의 댓글