1

对于我的 React 应用程序，我想做的就是使用 Tab 和 Shift Tab 的当前功能，但让向上/向下箭头做同样的事情。

我知道你可以用 Reacts "useRef" 和 "focus" 来模拟这种行为，但是我的应用程序将有动态呈现的元素，这些元素总是在变化的。

我正在使用基于用户输入填充递归树的递归组件。我还计划允许子节点顺序是可排序的（按多个字段和排序顺序）。

所以没有（简单的）方法可以知道上一个/下一个元素是哪个“参考”。这使得“ref.current.focus()”几乎无法使用。

但是一旦渲染了 Dom，Tab 和 Shift Tab 就像我想要的那样工作......

...我只想让向上/向下箭头键执行此操作（即向上箭头将执行 Shift Tab 操作，而向下箭头将执行 Tab 操作）。

无论如何以编程方式在 React 应用程序中发送 Tab/Shift Tab 击键？

或者也许在构建 DOM 之后以某种方式将焦点更改为上一个/下一个“兄弟”（即 ref.current.nextSibling.focus()）？

我似乎无法使这些方法中的任何一种起作用。

4

1 回答 1

0

你可以听到按键componentDidMount()

componentDidMount(){
    document.addEventListener("keydown", this.handleKeyDown);
}

你的 handleKeyDown 将是；

handleKeyDown(e) {
  e.preventDefault();
  if(e.keyCode == 38){
    //up arrow
    e.dispatchEvent(new Event('keypress', {keyCode: 9}))
  }
}
于 2022-01-25T08:37:25.627 回答