javascript - React：键盘事件处理程序全部为“空”

Question

除了事件属性之外，我无法让任何 ReactSyntheticKeyboardEvent处理程序注册任何内容。null

我已经在小提琴中隔离了组​​件，并且得到了与我的应用程序相同的结果。谁能看到我做错了什么？

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

Answer 3

正如 Riccardo Galli 正确指出的那样，当您在控制台中访问日志对象时，它已经被垃圾收集了。

我使用的解决方案是只记录对象的克隆，因此不会被垃圾收集。可以通过多种方式进行克隆，但由于我使用 lodash，因此我的日志记录如下：

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

Answer 4

您还可以通过属性从Synthetic*Event包装器中提取底层（原始）浏览器事件。nativeEvent例如，

handleKeyDown: function(e) {
  console.log('keyDown:event', e.nativeEvent);
},

（就像@Riccardo 关于 的注释一样e.persist()，如果不阅读 React.js 源代码，您应该如何知道这一点尚不清楚。）