React에서 onChange와 onInput의 차이점은 무엇입니까?
나는 이것에 대한 답을 찾기 위해 노력했지만 대부분은 onChange흐림을 유발하는 React의 컨텍스트 외부에 있습니다 .
다양한 테스트를 수행 할 때이 두 이벤트가 어떻게 다른지 (텍스트 영역에 적용했을 때) 말할 수없는 것 같습니다. 누구든지 이것에 대해 밝힐 수 있습니까?
진짜 차이가없는 것 같아요
어떤 이유로 React는 리스너를 Component.onChangeDOM element.oninput이벤트에 연결합니다. 양식에 대한 문서의 참고를 참조하십시오.
이 행동에 놀란 사람들이 더 많이 있습니다. 자세한 내용은 React 문제 추적기에서이 문제를 참조하세요.
React의 onChange가 onInput # 3964와 어떻게 관련되는지 문서화
해당 문제에 대한 의견에서 인용 :
React가 onChange가 onInput처럼 동작하도록 선택한 이유를 이해할 수 없습니다. 내가 알 수 있듯이, 우리는 이전 onChange 동작을 되돌릴 방법이 없습니다. 문서는 이것이 "잘못된 명칭"이라고 주장하지만 실제로는 아닙니다. 입력이 포커스를 잃을 때까지 변경 사항이있을 때 실행됩니다.
유효성 검사를 위해 입력이 완료 될 때까지 유효성 검사 오류를 표시하지 않으려는 경우가 있습니다. 아니면 모든 키 입력에 대해 다시 렌더링하는 것을 원하지 않을 수도 있습니다. 이제이를 수행하는 유일한 방법은 onBlur를 사용하는 것이지만 이제는 값이 수동으로 변경되었는지도 확인해야합니다.
그렇게 큰 거래는 아니지만 React가 유용한 이벤트를 버리고 이미 이것을 수행하는 이벤트가 있었을 때 표준 동작에서 벗어난 것처럼 보입니다.
댓글에 100 % 동의합니다 ...하지만 지금 변경하면이 동작에 의존하는 많은 코드가 이미 작성 되었기 때문에 해결하는 것보다 더 많은 문제가 발생할 것 같습니다 (그리고 Preact 와 같은 다른 프레임 워크에도 복사되었습니다 ). .
React는 공식 Web API 컬렉션의 일부가 아닙니다.
React가 JS를 기반으로 구축되고 엄청난 채택률을 보였음에도 불구하고 React는 자체 (상당히 작은) API 아래에 많은 기능을 숨기기 위해 존재하기 때문입니다. 이것이 명백한 영역은 이벤트 시스템에 있으며, 표면 아래에서 실제로는 표준 DOM 이벤트 시스템과 근본적으로 다른 많은 일이 진행되고 있습니다. 어떤 이벤트가 무엇을하는지뿐만 아니라 데이터가 이벤트 처리의 어떤 단계에서 지속되도록 허용되는시기도 마찬가지입니다. 여기에서 자세한 내용을 읽을 수 있습니다.
React에는 기본 'onChange'이벤트의 동작이 없습니다. 우리가 반응에서 보는 'onChange'는 기본 'onInput'이벤트의 동작을 가지고 있습니다. 따라서 귀하의 질문에 대답하기 위해 반응에서 두 가지 모두 차이가 없습니다. 나는 GitHub에서 동일한 문제를 제기했으며 이것이 그들이 그것에 대해 말해야하는 것입니다.
이 결정이 내려 졌을 때 (~ 4 년 전?) onInput은 브라우저간에 일관되게 작동하지 않았고 다른 플랫폼에서 웹을 방문하는 사람들에게 혼란 스러웠습니다. 모든 변화에 불이 붙습니다. React의 경우 변경 사항을 충분히 빨리 처리하지 못하면 제어 된 입력이 업데이트되지 않아 사람들이 React가 손상되었다고 생각하게되므로 더 큰 문제입니다. 그래서 팀은 그것을 onChange라고 불렀습니다.
돌이켜 보면 다른 이벤트의 동작을 변경하는 것보다 onInput을 폴리 필하고 이름을 유지하는 것이 더 나은 생각이었을 것입니다. 하지만 그 배는 오래 전에 항해했습니다. 나중에이 결정을 다시 검토 할 수도 있지만, React DOM의 특성으로 취급하는 것이 좋습니다 (아주 빨리 익숙해 질 것입니다).
https://github.com/facebook/react/issues/9567
또한이 기사는 기본 'onChange'에 대한 더 많은 통찰력과 해결 방법을 제공합니다.
https://www.peterbe.com/plog/onchange-in-reactjs
최근 onChange에 IE11의 입력 필드에 복사 및 붙여 넣기를 허용하지 않는 버그가 발생했습니다 . onInput이벤트가 그 행동을 허용하는 반면 . 문서에서 이것을 설명하는 문서를 찾을 수 없지만 둘 사이에 차이가 있음을 보여줍니다 (예상 여부).
여기의 다양한 주석에서 볼 수 있듯이 React는이 결정의 장점에 대해 토론하기보다는 onChange와 onInput을 동일하게 취급합니다. 여기에 해결책이 있습니다.
완료 될 때까지 사용자의 편집을 처리하지 않으려면 onBlur를 사용하십시오. :)
'Program Tip' 카테고리의 다른 글
| 임시 개체 반환 및 const 참조에 바인딩 (0) | 2020.12.05 |
|---|---|
| :: PostgreSQL에서 무엇을합니까? (0) | 2020.12.05 |
| C 및 C ++의 문자열 리터럴 유형은 무엇입니까? (0) | 2020.12.05 |
| 검색 엔진은 관련 콘텐츠를 어떻게 찾습니까? (0) | 2020.12.05 |
| 언제 바이트 배열을 사용하고 언제 바이트 버퍼를 사용합니까? (0) | 2020.12.05 |