React onInput - IE9/10 event.target.value ist leer?

Question

Ein einfacher gesteuerter Eingang aktualisiert den Wert nicht basierend auf Benutzereingaben, wenn "onInput" als hörendes Ereignis verwendet wird (in IE9/10). "onChange" funktioniert ordnungsgemäß, aber "onInput" wurde als unser Ereignis ausgewählt, um das Einfügen von Werten in IE11 zu lösen.

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

Ist dies eine fehlerhafte Implementierung einer kontrollierten Eingang? Wenn ja, wie kann dies behoben werden? Wenn nein, welche Alternativen gibt es?

Answer 1

Ich würde immer noch onChange verwenden, obwohl ich es jetzt nicht testen kann Ich habe gehört, dass onInput einige Probleme mit IE9 hat. Nach docs reagieren:

Für <input> und <textarea>, onChange ersetzt - und sollte in der Regel statt der DOM-internen oninput Event-Handler verwendet werden.

Wie wäre es mit der Erstellung eines Fix für die onChange in IE11 statt andere Listener zu verwenden? Ein Hack, obwohl ich nicht empfehlen, dies zu tun, könnte wahrscheinlich onChange und onInput gleichzeitig verwenden. Denken Sie daran, dass Chrome beide Anrufe auslöst. Daher würde ich die Weiterleitung von onInput nur empfehlen, wenn userAgent übereinstimmt.

Ich habe auch gefunden, diese Polyfill, die einige dieser Probleme behebt (mit Löschen, Löschen, schneiden Sie den Wert) Konnte es jedoch nicht testen: https://github.com/buzinas/ie9-oninput-polyfill.