传递给onkeyup和onkeydown处理程序的事件未在带有ReactJS的Chrome上设置event.key值

Question

When i run following code in Chrome I cannot access the event.key value:

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')
);

On latest IE and Firefox it works fine, but on chrome I got following result:

As far as I understand React documentation: https://facebook.github.io/react/docs/events.html React's events should provide cross-browser behavior so I'd expect the same result in all browsers. Did I miss something?

PS. I've created a jsfiddle to play with this issue: https://jsfiddle.net/69z2wepo/38132/

Answer 1

In the source code you can see that when the key is not on the native event object, React only translates keyCode into the missing key for the special keys:

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