javascript - 我如何将向上/向下箭头键 "Map"到 Tab/Shift Tab？

Question

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

我知道您可以使用 Reacts“useRef”和“focus”来模拟这种行为，但我的应用程序将具有动态渲染的元素，这些元素总是在变化。

我正在使用递归组件，它根据用户输入填充递归树。我还计划让子节点顺序可以排序(通过多个字段和排序顺序)。

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

但是一旦渲染了 Dom，Tab 和 Shift Tab 就完全按照我想要的方式工作了......

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

有没有办法在 React 应用程序中以编程方式发送 Tab/Shift Tab 击键？

或者在构建 DOM 后(即 ref.current.nextSibling.focus())以某种方式将焦点更改为上一个/下一个“同级”？

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

Answer 1

你可以在 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}))
  }
}