Material UI Popover-keydown事件模拟问题

Question

该任务是通过箭头键而不是TAB / TAB + SHIFT在下拉列表中导航。想法之一是替换箭头键的按下事件来模拟TAB / TAB + SHIFT键按下。我的方法归结为以下代码，该代码成功防止了默认箭头键事件并触发了显示警报的TAB键代码。

不幸的是，它没有将突出显示移动到所需的列表项，并且除了在纸上触发TAB键事件之外，什么也没有做。

任何想法为什么它不起作用？

handleKeyDown = (e) => {
let element  = e.currentTarget;

switch (e.keyCode) {
  case 40:
  e.preventDefault();
  const event = new KeyboardEvent("keydown", { view: window, bubbles: true, cancelable: true, keyCode: 9, shiftKey: false });
  element.dispatchEvent(event);
  break;
}
switch (e.keyCode) {
  case 38:
  e.preventDefault();
  const event = new KeyboardEvent("keydown", { view: window, bubbles: true, cancelable: true, keyCode: 9, shiftKey: true });
  element.dispatchEvent(event);
  break;
}
switch (e.keyCode) {
  case 9:
  e.preventDefault();
  alert ("You pressed the 'TAB' key!");
  break;
}


<Popover onKeyDown={this.handleKeyDown}>

Answer 1

因为您正在处理e.keycode==9并防止该块中发生默认事件，

switch (e.keyCode) {
  case 9:
  e.preventDefault();
  alert ("You pressed the 'TAB' key!");
  break;
}

[当在一行中按下向下或向上时触发键9时，

const event = new KeyboardEvent("keydown", 
                               { view: window,
                                 bubbles: true,
                                 cancelable: true,
                                 keyCode: 9,
                                 shiftKey: true });

您实际上是在触发块的case 9，其中e.preventDefault()阻止其执行其默认行为。

解决方案是删除案例9的e.preventDefault()但是，当在该元素上按下tab键时，它也将起作用。

建议：如我在上面的评论中提到的，在许多情况下使用单个开关。这是JavaScript中切换案例的正确语法。