javascript 反应：键盘事件处理程序全部为“空”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22123055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React: Keyboard Event Handlers All 'Null'
提问by cantera
I'm unable to get any of the React SyntheticKeyboardEventhandlers to register anything except nullfor the event properties.
我无法让任何 ReactSyntheticKeyboardEvent处理程序注册除null事件属性之外的任何内容。
I've isolated the component in a fiddle and am getting the same result as in my application. Can anyone see what I'm doing wrong?
我已经在小提琴中隔离了该组件，并且得到了与我的应用程序中相同的结果。谁能看到我做错了什么？
http://jsfiddle.net/kb3gN/1405/
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);
回答by cantera
BinaryMuseprovided the answer on IRC. Turns out it's just a quirk; you can't read the properties directly from SyntheticKeyboardEvent-- you need to specify the properties from the handler:
BinaryMuse在 IRC 上提供了答案。原来这只是一个怪癖；您不能直接从中读取属性SyntheticKeyboardEvent——您需要从处理程序中指定属性：
handleKeyUp: function(e) {
console.log(e.type, e.which, e.timeStamp);
},
回答by Riccardo Galli
console.log() is aynchronous and by the time it access the event React already garbage collected it (it reuses the event for performance reasons).
console.log() 是异步的，当它访问事件时，React 已经对其进行了垃圾回收（出于性能原因，它重用了该事件）。
For debugging purposes, the simplest thing to do is to tell React to not discard that event
出于调试目的，最简单的做法是告诉 React 不要丢弃该事件
e.persist() // NOTE: don't forget to remove it post debug
console.log(e)
I can't find an API documentation, the method is at least documented in the sources https://github.com/facebook/react/blob/c78464f/src/renderers/shared/stack/event/SyntheticEvent.js#L155
我找不到 API 文档，该方法至少记录在来源https://github.com/facebook/react/blob/c78464f/src/renderers/shared/stack/event/SyntheticEvent.js#L155
回答by Peter
As Riccardo Galli points out correctly, the log object is already garbage collected at the time you access it in the console.
正如 Riccardo Galli 正确指出的那样，日志对象在您在控制台中访问它时已经被垃圾收集了。
The solution I use is to just log a clone of the object, so it won't be garbage collected. Cloning can be done in a lot of ways, but since I use lodash, I log like this :
我使用的解决方案是只记录对象的克隆，因此它不会被垃圾收集。克隆可以通过很多方式完成，但由于我使用 lodash，我这样记录：
handleKeyDown: function(e) {
console.log(_.cloneDeep(e)));
}
回答by chbrown
You can also extract the underlying (original) browser event from the Synthetic*Eventwrapper via the nativeEventproperty. E.g.,
您还可以Synthetic*Event通过nativeEvent属性从包装器中提取底层（原始）浏览器事件。例如，
handleKeyDown: function(e) {
console.log('keyDown:event', e.nativeEvent);
},
(Just as with @Riccardo's note about e.persist(), it's unclear how you're supposed to know this without reading the React.js source code.)
（就像e.persist()@Riccardo的关于 的注释一样，如果不阅读 React.js 源代码，不清楚你应该如何知道这一点。）
