事件傳遞的onkeyup和onkeydown事件處理程序不ReactJS

當我運行在Chrome下面的代碼我無法訪問event.key值設置在Chrome event.key值：事件傳遞的onkeyup和onkeydown事件處理程序不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') 
);

在最新的IE和Firefox它工作正常，但對鉻我得到以下結果：

據我瞭解陣營文檔：https://facebook.github.io/react/docs/events.html作出反應的事件應該提供跨瀏覽器的行爲，所以我希望在所有的瀏覽器相同的結果。我錯過了什麼？

PS。我創建了一個的jsfiddle這個問題發揮：https://jsfiddle.net/69z2wepo/38132/

來源

2016-04-12 krlm

在source code你可以看到，當關鍵不是原生事件對象，陣營只轉換鍵代碼到失蹤關鍵爲特殊鍵：

/** 
* 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 
*/

來源

2016-04-12 17:21:44

感謝您的鏈接。我錯誤地認爲React正在用SyntheticEvent提供規範化的跨瀏覽器行爲。我建議使用適當的polyfill來提供KeyboardEvent.key處理。 http://caniuse.com/#feat=keyboardevent-key – krlm

事件傳遞的onkeyup和onkeydown事件處理程序不ReactJS

回答

相關問題