React input태그 마우스클릭시 동작이 이상합니다.

Question

{ console.log(e.target.value)}} >

input에 온체인지로 console.log를 찍는데감자 를 입력하면콘솔이 이렇게찍히고 이상태에서 입력필드를 마우스클릭하면위와같이 값이 변경되면서 감, 감자가 연달아 찍힙니다. onchange가 두번 타는거죠.입력필드가아니라 브라우저의 다른부분을 클릭해서 포커스를 잃어도똑같이 onchange가 위와같이 두번 타면서 onblur됩니다. 영어로 입력시에는 증상이없으며 이전에 비슷한 질문 올렸을때 IME의 개입때문에 그런것 같다 라는 답변을 받았습니다만아무리찾아봐도 IME의 어떠한 개입때문에 위와같은 문제가 발생하는지, 그렇다면 어떻게 해결할수있는지 찾을수가없어서다시한번 질문올립니다. MAC에선 증상없고 윈도우에서만 위와같은 이상현상이있습니다.

kiroki · Answer

자판과 문자가 1:1로 대응하는 영어, 숫자와는 달리한글, 일본어, 중국어 등등은 몇개의자판이 조합되어 한문자가 되는 경우가 대부분입니다.이를 지원하는 것이 IME(입력 방식 편집기)입니다이 IME가 동작중에는 IME를 사용하는 OS와 브라우저 양쪽에 이벤트가 발생합니다.IME가 동작중인지는 e.nativeEvent.isComposing 이 true인지로 확인할 수 있습니다.따라서if (event.nativeEvent.isComposing) { return;}를 이벤트 핸들러의 최상위에 위치하여 IME가 조합중인 경우에는 필요한 로직이 작동하지 않도록 방지 할 수 있습니다.출처 : bar-foo

React input태그 마우스클릭시 동작이 이상합니다.

1개의 답변

기술 목록