如何通过列表向下键或向上键以触发对事件侦听器内项目的关注？

Question

我正在尝试在特定元素节点上运行focus()方法，具体取决于是否按下了向上箭头键或向下箭头键。 我要关注的列表项是我正在监听的兄弟节点的子节点，因为我希望将焦点从搜索框（输入标签）到 go 到兄弟节点的子节点。

当按下向下箭头键时，我将 firstChild 属性放在事件侦听器内的 searchSuggest 框中，但是，每次按下它都会在第一个子项或列表项上运行focus()方法，而不是下一个兄弟名单。

  const d = document,     
    searchBox = d.getElementById("PFsearchBox"),
    searchSuggest = d.getElementById("PFsearchSuggest")


  searchBox.addEventListener("keydown", e => {
    // up arrow
    if (e.which === 38) {
        e.preventDefault();
        // select the last item in the suggestion list
        searchSuggest.children[searchSuggest.children.length - 1].focus()
    }

    // down arrow
    if (e.which === 40) {
    e.preventDefault();
    searchSuggest.firstChild.focus()
    }
  });

我希望当按下向下箭头键时，焦点从输入框转到 searchSuggest 节点中的第一个子列表项，然后每次按下向下箭头键时依次向下列表，反之亦然箭头键被按下。

Answer 1

 onKeyDown={(e) => {    
      if (["Enter", "ArrowDown"].includes(e.key)) {
           let inputs = document.querySelectorAll('input')
           inputs = Array.from(inputs)
           let index_input = inputs.indexOf(document.getElementById(e.target.id))
           let next = inputs[index_input + 2]
           next.focus()
                   
          atualiza_valor(params.row, e.target.value)
        
        }
       
                 if (["ArrowUp"].includes(e.key))   {
                   let inputs = document.querySelectorAll('input')
                   inputs = Array.from(inputs)
                   let index_input = inputs.indexOf(document.getElementById(e.target.id))
                   let next = inputs[index_input - 2]
                   next.focus()  
                 }
               }}