2016-04-12 7 views
0

Wenn ich Code in Chrome folgenden laufen kann ich nicht den event.key Wert zugreifen:Ereignis übergeben onkeyup und onkeydown Handler setzen nicht event.key Wert auf Chrome mit ReactJS

var Hello = React.createClass({ 
    getInitialState: function() { 
    return { value: 'Empty' } 
    }, 

    keyHandler: function(e){ 
    e.persist(); 
    var value = e.type + ':' + e.key; 

    this.setState(function(previousState, currentProps) { 
     return { value: previousState.value + '\n' + value }; 
    }); 
    }, 

    render: function() { 
    return (
    <div> 
     <input 
     onKeyDown={this.keyHandler} 
     onKeyUp={this.keyHandler} 
     onKeyPress={this.keyHandler} 
     /> 
     <pre>{this.state.value}</pre> 
    </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <Hello />, 
    document.getElementById('container') 
); 

Auf neuesten IE und Firefox es funktioniert gut, aber auf Chrom ich habe folgendes Ergebnis: Result in chrome

Soweit ich Dokumentation verstehen Reagieren: https://facebook.github.io/react/docs/events.html die Ereignisse reagieren Cross-Browser-Verhalten bieten sollten, damit ich das gleiche Ergebnis in allen Browsern erwarten würde. Habe ich etwas verpasst?

PS. Ich habe eine jsfiddle erstellt mit diesem Thema zu spielen: https://jsfiddle.net/69z2wepo/38132/

Antwort

0

In dem source code Sie können sehen, dass, wenn die Schlüssel nicht auf dem nativen Ereignisobjekt ist, Reaktion übersetzt nur keyCode in die fehlenden Schlüssel für die speziellen Schlüssel:

/** 
* Translation from legacy `keyCode` to HTML5 `key` 
* Only special keys supported, all others depend on keyboard layout or browser 
* @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names 
*/ 
+0

Danke für den Link. Ich habe fälschlicherweise angenommen, dass React mit seinem SyntheticEvent ein normalisiertes Cross-Browser-Verhalten bietet. Ich würde vorschlagen, ein richtiges Polyfill zu verwenden, um KeyboardEvent.key-Behandlung bereitzustellen. http://caniuse.com/#feat=keyboardevent-key – krlm

Verwandte Themen