1

"onInput"이 청취 이벤트 (IE9/10에서 )로 사용되면 간단한 제어 입력이 사용자 입력에 따라 값을 업데이트하지 않습니다. "onChange"는 제대로 작동하지만 IE11에서 값을 붙여 넣기 위해 해결하기 위해 "onInput"이 이벤트로 선택되었습니다.onInput에 반응 - IE9/10 event.target.value가 비어 있습니까?

class TestComp extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { value: "" }; 
    this.updateValue = this.updateValue.bind(this); 
    } 

    render(){ 
    return <input onInput={this.updateValue} value={this.state.value} />; 
    } 

    updateValue(evt){ 
    this.setState({ value: evt.target.value }); 
    } 
}; 

https://codepen.io/anon/pen/KmJPGR

이 제어 입력을 잘못 구현? 그렇다면이 문제를 어떻게 해결할 수 있습니까? 없다면 대안은 무엇입니까?

답변

1

나는 onInput이 IE9에 몇 가지 문제가 있다고 들었지만 지금은 테스트 할 수 없지만 여전히 onChange을 사용합니다. 문서를 반응 따르면

<input><textarea>를 들어

, onChange는 대체 - 일반적으로 대신 DOM의 내장에서 oninput 이벤트 핸들러의 사용되어야한다.

다른 수신기를 사용하는 대신 IE11에서 onChange에 대한 픽스를 만드는 것은 어떻습니까? 해킹, 이 작업을 수행하는 것을 권장하지 않지만은 아마도 onChangeonInput을 동시에 사용하고있을 수 있습니다. Chrome은 두 호출을 모두 트리거하므로 onInput을 전달하는 것이 좋습니다 (userAgent과 일치하는 경우에만).

이 폴리 필은 삭제, 지우기, 값 잘라내 기와 함께 이러한 문제 중 일부를 수정했습니다. 그러나 테스트 할 수 없습니다 : https://github.com/buzinas/ie9-oninput-polyfill.

+1

답변 해 주셔서 감사합니다. onChange로 돌아가는 제안은 IE11 붙여 넣기 (https://stackoverflow.com/a/6902610/3669863)의 약간 다른 해킹이긴하지만 어제 끝났습니다. 이것은 나를 위해 일하고있다 :) – veratti