反应：键盘事件处理程序所有'空'

我无法让任何React SyntheticKeyboardEvent处理程序为事件属性注册除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（）是asynchronous的，当它访问事件时，React已经被垃圾收集了（它为了性能的原因重用了这个事件）。

为了进行debugging，最简单的方法是告诉React不要丢弃该事件

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

我找不到API文档，至less在源代码中logging了该方法https://github.com/facebook/react/blob/c78464f/src/renderers/shared/stack/event/SyntheticEvent.js#L155

Answer 3

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

我使用的解决scheme是只logging对象的克隆，所以它不会被垃圾收集。 克隆可以用很多方法完成，但是因为我使用了lodash，所以我这样写：

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

Answer 4

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

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

（就像@ Riccardo关于e.persist()的说明e.persist() ，目前还不清楚如何在不阅读React.js源代码的情况下了解这一点）。