React:键盘事件处理程序全部'空'

Question

SyntheticKeyboardEvent除了null事件属性之外,我无法让任何React 处理程序注册任何东西.

我已经将这个组件隔离在一个小提琴中,并得到与我的应用程序相同的结果.谁能看到我做错了什么？

http://jsfiddle.net/kb3gN/1405/

var Hello = React.createClass({
    render: function() {
      return (
      <div>
        <p contentEditable="true"
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
           onKeyPress={this.handleKeyPress}>Foobar</p>
        <textarea
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
           onKeyPress={this.handleKeyPress}>
        </textarea>
        <div>
          <input type="text" name="foo" 
           onKeyDown={this.handleKeyDown}
           onKeyUp={this.handleKeyUp}
           onKeyPress={this.handleKeyPress} />
        </div>
      </div>
      );
    },

    handleKeyDown: function(e) {
      console.log(e);
    },

    handleKeyUp: function(e) {
     console.log(e);
    },

    handleKeyPress: function(e) {
     console.log(e); 
    }
});

React.renderComponent(<Hello />, document.body);

Answer 1

BinaryMuse在IRC上提供了答案.事实证明这只是一个怪癖; 您无法直接从中读取属性SyntheticKeyboardEvent- 您需要从处理程序中指定属性:

handleKeyUp: function(e) {
 console.log(e.type, e.which, e.timeStamp);
},

http://jsfiddle.net/BinaryMuse/B98Ar/

Answer 2

console.log()是异步的,当它访问事件时,React已经垃圾收集它(它出于性能原因重用该事件).

出于调试目的,最简单的方法是告诉React不要丢弃该事件

e.persist() // NOTE: don't forget to remove it post debug
console.log(e)

我找不到API文档,该方法至少记录在源代码https://github.com/facebook/react/blob/c78464f/src/renderers/shared/stack/event/SyntheticEvent.js#L155