事件传递的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

回答

相关问题