onKeyDown

홍석현·2022년 11월 9일
0
 const commentBox = () => {
    let inputArr = [...inputBox];
    inputArr.push(input);
    setInputBox(inputArr);
    inputValue('');
  };

  const enter = e => {
    if (e.code === 'Enter') {
      
        commentBox();
      
    }
  };
  /*
  
  onKeyUp={enter}

댓글을 다는 코드를 작성했다.
한글로 댓글을 달면 댓글이 두개씩 달린다.
찾아보니 한글은 조합문이라 단어의 조합이 끝난지 아닌지 알 수 없어서
이벤트가 두번 발생한다고 했다
처음에는 onKeyPress를 사용했다.

후에 찾아보니 더이상 사용하지 않는 이벤트라고 해서 keyUP과 Down 중
고민했다.
up 과 down의 차이는
up = 키값이입력되고 키를 떼면 이벤트가 발생함
down = 입력시 이벤트 발생 후 값 입력
이다.

keyDown을 쓰고 event.nativeEvent.isComposing()을 사용해야한다는것을
깨달았다.

또한 event.nativeEvent.isComposing()은 boolean값으로만 읽히기때문에 댓글이 두개 달리는걸 방지하려면 false를 줘야한다는것도 깨달았다.

const enter = e => {
    if (e.code === 'Enter' && e.nativeEvent.isComposing === false) {
      commentBox();
    }
  };
  
  onKeyDown={enter}

로 변경하였다.

profile
Front-end to Full-stack

0개의 댓글