Нужен короче переход при нажатии кнопок-стрелок. Что бы черный квадрат

Question

Нужен короче переход при нажатии кнопок-стрелок. Что бы черный квадрат

перемещался и выделял нужную кнопку, включая "согласие" и "подтвердить номер"

Подскажите как обычно делают такую логику?

С технической стороной у меня проблем нет. Я имею текстовый идентификатор в состоянии и меняя его могу делать любую кнопку активной активной.

Вопрос именно в том, что бы написать логику для смены кнопки

например я нажимаю вниз на клавиатуре в текущей позиции (выделена клавиша "0") и попадаю на кнопку "Согласие"

или нажимаю вверх и попадаю на "9"

или нажимаю вправо и попадаю на "стереть"

ПОка у меня из идей только словарь, где для каждой кнопки прописать на какие она может переходить

но вот интересно а если кнопок допустим 100 и их структура не упорядачена?

как такое вообще делают?

#frontend #javascript #programming #react.js #russian

0

21.10.2023

4 ответов

24 просмотра

Dmitry Remezov

Я там навертел моё почтение, но выжимка такая. Вместо сдвигов на недели/дни у тебя будет сдвиг по виртуальной сетке элементов (по которой рисуются кнопки) const focusDay = (day: Dayjs) => { Model.setFocused(day); daysRef.current[getDayjsID(day)]?.focus(); }; const handleKeyDown = useKeyboardCallback({ preventDefault: true, handlers: { ArrowUp() { focusDay(focused.subtract(1, 'week')); }, ArrowDown() { focusDay(focused.add(1, 'week')); }, ArrowLeft() { focusDay(focused.subtract(1, 'day')); }, ArrowRight() { focusDay(focused.add(1, 'day')); } } }, [focused]);

0

21.10.2023

Rain Автор вопроса

Dmitry Remezov
Я там навертел моё почтение, но выжимка такая. Вме...

гм... в принципе идея понятна ладно, спасибо

0

21.10.2023

Dmitry Remezov

Dmitry Remezov
Я там навертел моё почтение, но выжимка такая. Вме...

Чето типа const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ['reset', 'reset', 0] ];

0

21.10.2023