ReactJS - Навигация по списку <li>с помощью стрелок вверх и вниз и ссылок - PullRequest
Новая
       21

ReactJS - Навигация по списку <li>с помощью стрелок вверх и вниз и ссылок

0 голосов
/ 02 апреля 2020

Так что я все еще относительно новичок в кодировании и у меня проблемы с чем-то. Я пытаюсь реализовать меню, по которому пользователь должен иметь возможность перемещаться, используя клавиши со стрелками вверх и вниз. Я использовал .map () для добавления динамических c ссылок к моим 4

следующим образом: 
const refLink = {};
var refNumber = '';

const navLinks = links.map((link) => (
  refNumber = link.id,
  refLink[link.id] = useRef(),
  <li role='none' key={ link.id }><NativeLink { ...link.attributes } ref={ refLink[link.id] }>{ link.name }</NativeLink></li>
));

Затем я попытался создать функцию для навигации ВВЕРХ / ВНИЗ, например: 

function navigateList () {
  if(e.keyCode === 38){
    // Loop from first item to last
    if(firstItemFocused === true){
      e.preventDefault();
      refLink[3].current.focus();
    } 
    // Move up the list
    else {
      e.preventDefault();
      refLink[refNumber = refNumber-1].current.focus()
    }
  }
  else if(e.keyCode === 40){
    // Loop from last item to first
    if(lastItemFocused === true){
      e.preventDefault();
      refLink[0].current.focus();
    }
    // Move down the list
    else {
      e.preventDefault();
      refLink[refNumber = refNumber+1].current.focus()
   } 
 }
}

Но это плохо работает. Части l oop работают отлично, и я могу go от моего первого элемента до моего последнего и наоборот, но в остальном: 1 - Часть со стрелкой вверх работает странно: она переходит с последнего на 3-й элемент и с 2-го на 1-й предмет без проблем, но по какой-то причине мне нужно дважды нажать клавишу, чтобы фокус переместился с 3-го на 2-й предмет. 2 - Стрелка вниз просто не работает, и я получаю ошибку «TypeError: Невозможно прочитать свойство« current »of undefined».

Я не могу понять, что не работает и как это исправить. Если кто-то может помочь, это будет очень ценно

...