嘗試在 React 中調度按鍵事件

Question

我有一個帶有輸入元素的組件，我想在該輸入元素上觸發一個“tab”按鍵事件，以便在發生一組邏輯時跳轉到下一個輸入元素。

我在第一個輸入元素上有一個引用，我試圖觸發 keypress 事件，如下所示：

useEffect(() => {
  if (ref.current) {
    ref.current.focus();
    setTimeout(() => {
      ref.current.dispatchEvent(
        new KeyboardEvent("keypress", { key: "Tab" })
      );
    }, 3000);
  }
});

首先，我確保 select 是第一個帶有.focus()的輸入元素，然后在 3 秒后觸發按 Tab 鍵，希望看到焦點移動到下一個字段，但它似乎不起作用。

這似乎是一個奇怪的例子，但這只是一個原型。 我實際上打算做的是在我提交第一個輸入字段時觸發一些代碼，這將獲取一些帶有其他輸入字段的行，一旦呈現，我需要觸發“tab”鍵。 我想避免將 ref 附加到這些動態加載的輸入字段，因為我覺得它會增加很多開銷來跟蹤 ref 並將它們傳遞下來，而我所需要的只是利用 tab 順序並模擬按鍵以 tab 到加載后的第一個動態加載項。 我可以將單個引用添加到您需要提交以填充動態字段的字段。

我注意到一些示例在線調用 .dispatchEvent .dispatchEvent()直接在 ref object 上，但是如果我嘗試得到一個錯誤，告訴我 function 不存在，所以我改為在current道具上調用它。 不確定這是否有任何相關性。

這是一個原型的鏈接，上面的代碼來自： https://codesandbox.io/s/wizardly-hopper-vrh4w?file=/src/App.js:149-441

Answer 1

根據我在評論中得到的答案，您似乎無法通過模擬擊鍵來觸發本機瀏覽器行為（作為安全功能）（頁面下方有一個關於 2/3 的注釋）： https://developer.mozilla.org/en -US/docs/Web/API/KeyboardEvent

Answer 2

試試這個方法

new KeyboardEvent("keydown", { keyCode: "Tab", which: 9 })

以下是我如何獲得which https://keycode.info/

Answer 3

正如@funkylaundry 所指出的，出於安全原因，您不能通過調度自己的事件來觸發本機瀏覽器操作。

但是，您想要做的事情可以通過autofocus (HTML) / autoFocus (JSX) 屬性來實現，如下所示：

 const App = () => { const [showExtraFields, setShowExtraFields] = React.useState(false); const [showMoreExtraFields, setShowMoreExtraFields] = React.useState(false); React.useEffect((e) => { setTimeout(() => { setShowExtraFields(true); }, 3000); setTimeout(() => { setShowExtraFields(false); setShowMoreExtraFields(true); }, 6000); setTimeout(() => { setShowExtraFields(true); setShowMoreExtraFields(true); }, 9000); }, []); return ( <form> <input placeholder="Input 1" autoFocus /> { showExtraFields && (<React.Fragment> <input placeholder="Input 2" autoFocus /> <input placeholder="Input 3" /> <input placeholder="Input 4" /> </React.Fragment>) } { showMoreExtraFields && (<React.Fragment> <input placeholder="Input 5" autoFocus /> <input placeholder="Input 6" /> <input placeholder="Input 7" /> </React.Fragment>) } </form> ); } ReactDOM.render(<App />, document.querySelector('#app'));

 body { font-family: monospace; } input { display: block; margin-bottom: 8px; font-family: monospace; padding: 8px; background: white; border: 2px solid black; }

 <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>

注意焦點是如何進入Input 1 -> Input 2 -> Input 5 -> Input 2的。

基本上，如果頁面上有多個帶有autoFocus的輸入，則要安裝的最后一個元素會得到它。 這就是為什么在上次更新中，當顯示兩組輸入時，焦點轉到剛剛安裝的Input 2 ，而不是Input 5 ，后者在Input 2之后但已經出現在頁面上。