[React] input에 숫자만 출력하기 / 한글입력 오류 해결

onChange를 이용하여 입력한 value를 state에 저장하여 그 내용을 출력하는
코드를 작성하는 중 숫자만 입력받게 해야했다.

 

 

const handleKeyDown = (event) => {
  if (!Number(event.key) || !event.key == "Backspace") {
    event.preventDefault();
  }
};

<input
  ref={quanInput}
  type="tel"
  onKeyDown={handleKeyDown}
  value={quan.value}
  onChange={quan.onChange}
/>

 

onKeyDown을 사용하여 위의 코드랑 비슷한 식으로 작성했는데
이상하게 한글의 자음, 모음은 입력되는 현상이 발생했다.
함수실행은 분명히 keyDown먼저 되는데 말이다..
input type을 number로 해보는 등등 여러가지를 해보고
keyCode나 key전부 해봤는데 또 어쩌다 한글입력이 안되다가도
또 다음날 같은코드에 실행을 시켜보면 한글입력이 된다던지..

 

onKeyDown으로 처리를 해야된다는 글을 보고
keyCode를 너무 고집했던 같아 생각의 방향을 바꾸었다

 

const isNumber = (value) => {
  const regex = /[0-9]/g;
  return regex.test(value);
};

  const onChange = (event) => {
    if (event.nativeEvent.data && isNumber(event.nativeEvent.data)) {
      setValue(event.target.value);
    }else if (event.nativeEvent.data === null) {
    // 띄어쓰기는 가능하게 설정
      setValue(event.target.value);
    }
    event.preventDefault();
    return null;
  };

onChange의 event에는 다양한 속성들이 존재한다.
그 중 event.nativeEvent.data를 보면 내가 입력한 Data를 알 수 있다.
이것을 정규식 표현인 RegExp와 조합하여 입력받은 데이터가 Number인지 확인한다.