Как переместить фокус по списку с помощью клавиатуры с помощью ссылок? ⇐ Javascript

[Anonymous]

У меня есть неупорядоченный список в приложении React, и я хочу иметь возможность перемещаться по нему с помощью стрелок вниз/вверх. Список отображается условно, в зависимости от того, имеет ли переменная значение null или нет (по сути, список представляет собой раскрывающийся список предложений, который появляется, когда пользователь вводит текст в поле ввода). В списке может быть максимум 3 пункта и минимум 1. Я хочу сделать это с помощью ссылок вместо использования document.getElementById, чтобы правильно работать с помощью React.
Вот рендеринг списка — я явно перечислил каждый элемент вместо использования функции карты, чтобы иметь возможность правильно назначать ссылки:

Код: Выделить всё

{listItems ? [list] setListItems(null)} ref={suggestionRef}>

{listItems[0] ? [*] handleSelect(listItems[0].text)}
onKeyDown={e=> handleNav(e, listItems[0].text, 1, listItems.length, suggestion2, suggestion1)}
role='option' ref={suggestion0}> {listItems[0].text}  : null}

{listItems[1] ? [*] handleSelect(listItems[1].text)}
onKeyDown={e=> handleNav(e, listItems[1].text, 2, listItems.length, suggestion0, suggestion2)}
role='option' ref={suggestion1}> {listItems[1].text}  : null}

{listItems[2] ? [*] handleSelect(listItems[2].text)}
onKeyDown={e=> handleNav(e, listItems[2].text, 3, listItems.length, suggestion1, suggestion0)}
role='option' ref={suggestion2}> {listItems[2].text}  : null}

[/list] : null}

Ссылки определяются следующим образом:

Код: Выделить всё

const suggestionRef = useRef(null);
const suggestion0 = useRef(null);
const suggestion1 = useRef(null);
const suggestion2 = useRef(null);

Активация фокуса в списке работает с помощью следующей функции: нажатие стрелки вниз в поле ввода текста переводит фокус на первый элемент списка (если он существует):

Код: Выделить всё

 const handleKeyDown = (event) => {
if (listItems && event.key === 'ArrowDown') {
event.preventDefault();
if (suggestion0.current) {
suggestion0.current.focus();
}
}
}

После этого не работает перемещение между элементами, что обрабатывается следующим образом:

Код: Выделить всё

const handleNav = (event, text, index, maxLength, refBefore, refAfter) => {
if (event.key === 'Enter') {
event.preventDefault();
handleSuggestSelect(text);
}
else if (event.key === 'ArrowDown'){
event.preventDefault();
if (index == maxLength) { //back to beginning
if (suggestion0.current) {
suggestion0.current.focus();
}
} else {
if (refAfter.current) {
console.log(refAfter)
refAfter.current.focus();
}
}
}
else if (event.key === 'ArrowUp'){
event.preventDefault();
if (index == 1) {
if (suggestion2.current) { //down to the end - have to work this out differently if there are only two items in list
console.log(suggestion2)
suggestion2.current.focus();
}
} else {
if (refBefore.current) {
console.log(refBefore)
refBefore.current.focus();
}
}
}
}

Некоторые способы устранения неполадок, описанные выше в файле console.log, показывают, что текущий ток для ссылок равен нулю (хотя я пытался заставить его работать только тогда, когда он не равен нулю, с помощью операторов if). Вместо этого он передает if и переходит в console.log (показывает текущий как нуль), а затем пытается выполнить фокусировку, но это приводит к отмене рендеринга списка и больше ничего не происходит. Есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/797 ... using-refs