如何檢查 dom 的反應 onKeyDown

Question

我正在創建一些會給僅使用鍵盤的用戶帶來麻煩的示例。 我有一個像這樣創建的元素：

<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 的反應版本？

Answer 1

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>下有節點的 React 內部結構和其他人有__reactProps$<some suffix> 。 我只建議將它用作最后的手段，並極其謹慎，但它是一種選擇。