如何检查 dom 的反应 onKeyDown

问题描述

我正在创建可能会给仅使用键盘的用户带来麻烦的示例。我有一个像这样创建的元素：

<div id="role_tab_div_with_react_onclick_has_keydown" role="tab" onClick={() => activateDialog()} tabIndex="0" onKeyDown={() => activateDialog()}>
    <div class="btn-label">Click me (role=tab - has onkeyDown)</div>
</div>

但是，当渲染到 DOM 时，即使认为它现在可以键盘激活，onKeyDown 也不存在。

<div id="role_tab_div_with_react_onclick_has_keydown" role="tab" tabindex="0">
   <div class="btn-label">Click me (role=tab - has onkeyDown)</div>
</div>

所以，我检查一下元素是否已经有一个 onkeydown 事件：

if (el.hasAttribute('onKeyPress' || 'onKeyDown'))

没有找到。

有没有办法确定它是否存在 onKeyDown 的反应版本？

解决方法

React 处理事件侦听器的方式与您预期的略有不同。正如您所指出的，它不会将侦听器直接附加到它创建/管理的 DOM 元素。相反，它会在 DOM 层次结构的更高层附加一个侦听器，并使用有关源元素的信息来确定哪个 React 组件管理该元素，并通过扩展确定在哪里可以找到已注册的回调。如果您正在寻找更多细节，您可能会发现这篇文章很有帮助：https://dev.to/romaintrotard/under-the-hood-of-event-listeners-in-react-4g01。

由于 React 侦听事件的间接方式，您将无法清楚地列出回调。但是，根据您的用例，有几个选项：

1. 如果您知道应该将哪个函数作为回调调用，那么您可以在浏览器的调试器中添加断点，或者向您的回调添加某种可以观察的副作用（例如 console.log()） .
2. 如果您知道回调的预期副作用，但无法找到或更改回调函数本身，则可以查找这些而不是处理程序本身。
3. 如果代码对您来说实际上是一个黑匣子（根据您的评论听起来就是这种情况），那么就可以查看附加到该 DOM 节点的 React 对象。这不是 React 发布的 API 的一部分，因此比 JSX、核心组件的 props 等更频繁或更剧烈的变化。有__reactInternalInstance$<some suffix>。我只建议将其用作最后的手段，并极其谨慎地使用它，但它是一种选择。