reactjs - 反应合成事件奇怪的行为

Question

我已经搜索了其他答案，这个最接近我正在处理的问题。

但我的问题仍然存在。我无法访问合成事件的属性。喜欢shiftKey

在某些情况下，我使用的是与 react-d3-tree 库一起打包的 onClick 处理程序

我以为只是这个库引起了问题。但是在单击处理程序中，我可以将事件打印到控制台，并且可以看到shiftKey参数已按预期设置。但是每次我尝试访问时event.shiftKey都会收到错误消息：

index.js:1452 警告：出于性能原因，此合成事件被重用。如果您看到这一点，则表示您正在访问已发布/无效合成事件的属性 `shiftKey`。这设置为空。如果您必须保留原始合成事件，请使用 event.persist()。

请参阅我的代码示例。

更新：回购以复制问题https://github.com/mwilde345/reactBrokenClick

标签： reactjsd3.jsonclickmouseclick-eventreact-d3

Answer 1

不应依赖对象在控制台中出现的方式。对象在 JavaScript 中通过引用传递。如果对象内部在某个时候更新，它们将在控制台中更新。

persist()创建事件对象的副本，因此在调用它时它应该作为快照出现在控制台中。出现问题persist()意味着它出了问题。

该问题是由第三方组件引起的，Tree来自react-d3-tree. 事件对象是异步使用的，persist()在用户代码中不会有理想的结果，而是persist()应该在Tree组件中同步调用。