React: input type = range onChange는 키보드 화살표 키를 사용하여 값을 변경할 때 실행되어야합니다.

Chrome은 화살표 키를 사용하여 범위를 수정할 때 input 이벤트를 실행하지 않지만 Firefox는 실행합니다.

Chrome은 키보드로 변경할 때 '변경'이벤트를 발생시킵니다. 입력 대신 '변경'을 사용할 수 있습니까?

크롬 베타와 파이어 폭스에서는 마우스를 올릴 때까지 드래그 할 때 '변경'이 실행되지 않으므로 여기에서도 입력을 들어야합니다.

이것을 테스트하기 위해 JSFiddle을 만들었습니다. http://jsfiddle.net/vqnMU/embedded/result/

React는 input 듣고 input & change 트리거하는 것 같습니다.

슬라이더에 초점을 맞추고 오른쪽 누르기 :

| 브라우저 | 이벤트 | 반응 이벤트 |
| --- | --- | --- |
| Chrome 34.0.1847.131 * | -|| 변경 |
크롬 카나리아 | 입력, 변경 ||
| IE 10 | 변경 | -|

* _Firefox는 blur_에 change 를 트리거합니다.

추가로 끌기 :

| 브라우저 | 이벤트 | 반응 이벤트 |
| --- | --- | --- |
| Chrome 34.0.1847.131 | 입력 * | 입력, 변경 |
| Safari 7.0.3 | 입력, 변경 | 입력, 변경 |
| 크롬 카나리아 | 입력 * | 입력, 변경 |
| Firefox 29 | 입력 * | 입력, 변경 |
| IE 10 | 변경 | -|

* _이 브라우저는 모두 드래그 종료시 change 실행 _

모든 입력 유형 (35e7aa43f801f4836305ee25800988ce52003767)에서 변경 이벤트를 수신하도록 ChangeEventPlugin을 편집하면 위의 모든 브라우저에서 React의 변경 및 입력 이벤트 처리를 수정하는 것으로 보입니다. 풀 요청을해야합니까, 아니면 플러그인이 누락 된 파일 입력에 대한 change 이벤트 만 수신하는 이유가 있습니까?

React에 필요한 위젯을 포팅하려고 할 때이 문제가 발생했습니다.
핵심에있는 누군가가 @eddhannay 의 제안이 작동 할 것인지 여부에 대한 피드백을 줄 수 있습니까? 감사 :)

@locks 직접 구현하는 것이 좋습니다. 모든 HTML 입력 요소에는 정규화하기 어려울 수 있고 기본적으로 스타일 이없는 불일치가 많은 것 같습니다

@syranide 적어도 대부분 합리적으로 모든 내장 입력을 지원해야한다고 생각합니다.

@spicyj 확실히! 그러나 우리가 고칠 수없는 이상한 것들이 많이 있습니다. 엄격한 숫자가 아닌 경우 type="number" 의 값을 읽을 수없는 것과 같은 것입니다.

+1

범위 입력에 대한 브라우저 onchange에서 synth onChange를 실행하는 IE10 +에 대한 모든 해결 방법

IE10 +에 대한 입력은 +1 onChange 실행

모든 +1에 +1

어떤 소식이라도? 범위 입력은 여전히 ​​IE 11에서 깨졌습니다.
하지만 Edge에서는 잘 작동합니다.

적용하려면 +1하세요. Edge에서도 작동하지 않습니다.

IE 11에서는 작동하지 않습니다.

+1

그만한 가치를 위해, 이것이 핵심에서 해결되는 동안 구성 요소에 대한 해결 방법을 만들었습니다 : https://github.com/mapbox/react-range

+1, 모든 사람이 반응하는 작업을 좋아하지만,이 버그가 발견 된 지 2 년이되는 시점에 가까워짐에 따라이 버그를 수정하는 데 더 높은 우선 순위가되어야한다고 생각합니다.

@dancoates 이것이 당신보다 우리에게 더 낮은 우선 순위가되어 죄송합니다. 그래도 풀 리퀘스트를 보내주세요! ChangeEventPlugin 은 약간 털이 많지만 http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html의 블로그 게시물입니다. 일반적인 전략에 대한 아이디어를 제공해야합니다. 범위 요소의 경우 입력 및 변경 이벤트와 둘 중 하나가 발생할 때 이벤트를 발생시켜야합니다 (둘 다 발생하더라도 한 번만).

미안할 필요가 없습니다. 까다로운 일이라는 것을 압니다. ChangeEventPlugin을 살펴보고 제가 도울 수 있는지 살펴 보겠습니다.
문서의주의 사항 섹션이 변경 사항이 적용되지 않는 이유를 궁금해하는 사람들에게 도움이 될 것입니다. 이 스레드는 쉽게 찾을 수 있다고 생각합니다.

: +1 :이 문제를 해결하고 싶습니다!

내가 지금 문제를 어떻게 처리했는지
내 사용을 위해 단순히 onMouseUp 이벤트에 동일한 이벤트를 추가했으며 모든 IE 10 이상 및 Edge에서 작동합니다.

값이 mouseup 이벤트에서만 변경되기 때문에 똑같은 결과를 제공하지는 않지만 (어쨌든 내 경우에는) 아름답게 저하된다고 생각합니다.

나는 또한 이것을 만났고 그것이 고쳐지는 것을보고 싶습니다.

해결 방법에 대한 제안에 감사드립니다. "onClick"또는 "onMouseup"이벤트를 추가하는 것은 매우 도움이되었지만, 사용자가 슬라이더를 놓을 때까지 아무 일도 일어나지 않는 것은 여전히 ​​차선책입니다.

사용자가 드래그하는 동안 업데이트를받는 방법을 설명하는 StackOverflow에서 이것을 확인하십시오.

왜 이것이 닫혀 있습니까? 이것은 여전히 ​​문제입니다. onChange는 테스트에서 IE11에서 전혀 실행되지 않습니다. https://github.com/mapbox/react-range 를 사용하도록 강제

15.3.2를 사용하고 있으며이 문제가 발생합니다. 그 이후로 세 개의 마이너 릴리스에 대한 릴리스 정보를 살펴보면이 문제가 해결되지 않았 음을 알 수 있습니다. 폐쇄 된 이유는 무엇입니까? 문제 https://github.com/facebook/react/issues/8168 이 추적 사례 인 것 같지만이 문제에 문제에 대한 더 자세한 설명이있는 것 같습니다.

위의 기록을 보면 문제가 # 5746에 의해 종결되었음을 알 수 있습니다.
이 PR을 열면 마일스톤이 16으로 설정되어있는 것을 볼 수 있습니다.

따라서 수정 사항은 16 개이며, 동작에 큰 변화를 가져 오기 때문에 15.x에 넣을 수 없습니다.

15.x로 백 포트 할 수 있는지 모르겠습니다. @jquense 와 @nhunzaker 가 대답 할 수있을 것입니다.

것이 가능하다! PR도 있습니다 :) 이미 # 8575

오 좋아. 검토를 기다리고있는 DOM PR 목록을 만들 수 있습니까?
그런 다음 관련 사례가 수동 테스트를 갖도록 # 8583의 우산에 추가하십시오.

https://github.com/facebook/react/pull/8575 가 내 할 일 목록에 있습니다. 일부 항목을 로컬에서 테스트하면 병합 할 수있을 것 같습니다. 검토 할 기회가 생기면 # 8583에 몇 가지 관련 사례를 추가하겠습니다.

이것에 대해 브라우저 테스트 픽스쳐에서 작업하는 사람이 있습니까? 그렇지 않다면 쓸 시간이 있습니다.

계획 중이었지만 아직 시간이 없었습니다. 자유롭게 뛰어 들다

걱정 마. 작성해야 할 다른 테스트 사례가 많이 있습니다. https://github.com/facebook/react/issues/8308 과 관련된 PR이

오늘 Windows Phone에서이 문제가 발생했습니다. onChange에서 지정한 메서드를 호출하지 않습니다. 수정 사항은 언제 적용됩니까?

이것은 15.6.x에서 릴리스되었습니다.