Вопрос или проблема
Я создаю приложение для практики сочетаний клавиш, используя React, и сталкиваюсь с ошибкой, которую не понимаю. Чтобы определить, когда введено неправильное сочетание, я проверяю максимальную длину последовательности клавиш и использую validateCombination(), когда длина возвращается к 0, чтобы проверить, неверно ли оно. Это работает хорошо, кроме случаев, когда последними отпускаются клавиши-модификаторы, в этом случае неправильное сочетание не обнаруживается.
import React, { useEffect } from "react";
import { vsCodeShortchutMac } from "./shortcutData";
interface KeySequenceListenerProps {
keySequence: string;
setInputHistory: React.Dispatch<React.SetStateAction<{ text: string; status: "skipped" | "found" | "wrong" }[]>>;
inputHistory: { text: string; status: "skipped" | "found" | "wrong" }[];
currentShortcutIndex: number;
gameStarted: boolean;
}
const BadShortcut: React.FC<KeySequenceListenerProps> = ({
inputHistory,
setInputHistory,
currentShortcutIndex,
gameStarted,
}) => {
let numberOfKeysStillPressed = 0;
let currentKeys = "";
const currentShortcut = vsCodeShortchutMac[currentShortcutIndex];
const pressedKeys = new Set<string>(); // Отслеживайте нажатые клавиши
useEffect(() => {
if (!gameStarted) return;
const handleKeyDown = (e: KeyboardEvent) => {
e.preventDefault();
if (!pressedKeys.has(e.key)) {
pressedKeys.add(e.key);
currentKeys += e.key;
numberOfKeysStillPressed++;
console.log(`Key down: ${e.key}, currentKeys: ${currentKeys}, numberOfKeysStillPressed: ${numberOfKeysStillPressed}`);
}
};
const handleKeyUp = (e: KeyboardEvent) => {
e.preventDefault();
console.log(`Key up event: ${e.key}`); // Логирование для отладки
if (pressedKeys.has(e.key)) {
pressedKeys.delete(e.key);
numberOfKeysStillPressed--;
console.log(`Key up: ${e.key}, numberOfKeysStillPressed: ${numberOfKeysStillPressed}`);
if (numberOfKeysStillPressed <= 0) {
validateCombination();
currentKeys = "";
numberOfKeysStillPressed = 0;
}
}
};
const validateCombination = () => {
if (currentKeys !== currentShortcut.key) {
const wrongKey = `${currentKeys} - (Неправильно)`;
setInputHistory((prev) => [
...prev,
{ text: wrongKey, status: "wrong" },
]);
}
console.log("Сброс текущих клавиш");
};
document.addEventListener("keydown", handleKeyDown);
document.addEventListener("keyup", handleKeyUp);
return () => {
document.removeEventListener("keydown", handleKeyDown);
document.removeEventListener("keyup", handleKeyUp);
};
}, [gameStarted, currentShortcut.key, setInputHistory, inputHistory, currentKeys]);
return null;
};
export default BadShortcut;
В журнале вы можете видеть, что когда я последним отпускаю клавишу-модификатор, она не обнаруживает это, но с обычными символами это будет работать.
BadShortcut.tsx:32 Key down: Shift, currentKeys: Shift, numberOfKeysStillPressed: 1
BadShortcut.tsx:32 Key down: A, currentKeys: ShiftA, numberOfKeysStillPressed: 2
BadShortcut.tsx:38 Key up event: A
BadShortcut.tsx:42 Key up: A, numberOfKeysStillPressed: 1
BadShortcut.tsx:38 Key up event: Shift
BadShortcut.tsx:42 Key up: Shift, numberOfKeysStillPressed: 0
BadShortcut.tsx:59 Сброс текущих клавиш
BadShortcut.tsx:32 Key down: a, currentKeys: a, numberOfKeysStillPressed: 1
BadShortcut.tsx:32 Key down: Shift, currentKeys: aShift, numberOfKeysStillPressed: 2
BadShortcut.tsx:38 Key up event: A
BadShortcut.tsx:38 Key up event: Shift
BadShortcut.tsx:42 Key up: Shift, numberOfKeysStillPressed: 1
BadShortcut.tsx:32 Key down: Shift, currentKeys: aShiftShift, numberOfKeysStillPressed: 2
BadShortcut.tsx:38 Key up event: A
BadShortcut.tsx:38 Key up event: Shift
BadShortcut.tsx:42 Key up: Shift, numberOfKeysStillPressed: 1
BadShortcut.tsx:32 Key down: Shift, currentKeys: aShiftShiftShift, numberOfKeysStillPressed: 2
BadShortcut.tsx:32 Key down: A, currentKeys: aShiftShiftShiftA, numberOfKeysStillPressed: 3
BadShortcut.tsx:38 Key up event: A
BadShortcut.tsx:42 Key up: A, numberOfKeysStillPressed: 2
BadShortcut.tsx:38 Key up event: Shift
BadShortcut.tsx:42 Key up: Shift, numberOfKeysStillPressed: 1
Ответ или решение
Чтобы правильно обрабатывать событие отпускания модификаторов клавиш, таких как Shift, Ctrl или Alt, в вашем приложении React для практики сочетаний клавиш, важно учитывать особенности обработки нажатий и отпусканий клавиш, а также поведение модификаторов в JavaScript.
1. Понимание проблемы
Ваш код показывает хорошее начало, однако проблема заключается в том, что при отпускании последней модификаторной клавиши не вызывается функция для проверки введенной комбинации клавиш. Это происходит, потому что ваша логика проверки комбинации зависит от значения переменной numberOfKeysStillPressed. Когда последней отпускается модификаторная клавиша, вы не проверяете комбинацию, так как порядок нажатия и отпускания может не совпадать, что приводит к неправильному выводу.
2. Корректировка логики обработки событий
Чтобы исправить эту недоработку, попробуйте изменить порядок и структуру вашей логики в обработчиках событий. Обрабатывать отпускание модификаторов нужно таким образом, чтобы проверка комбинации происходила всегда, когда numberOfKeysStillPressed становится равным 0. Настоятельно рекомендуется также проверять, не является ли последняя отпущенная клавиша модификатором.
3. Модификация кода
Вот пример того, как вы можете изменить вашу существующую логику:
const handleKeyUp = (e: KeyboardEvent) => {
e.preventDefault();
console.log(`Key up event: ${e.key}`);
if (pressedKeys.has(e.key)) {
pressedKeys.delete(e.key);
numberOfKeysStillPressed--;
console.log(`Key up: ${e.key}, numberOfKeysStillPressed: ${numberOfKeysStillPressed}`);
// Проверка состояния нажатых клавиш только после изменения числа нажатых клавиш
if (numberOfKeysStillPressed === 0) {
validateCombination(); // Перенос проверки сюда
currentKeys = ""; // Сброс текущих клавиш после проверки
numberOfKeysStillPressed = 0; // Сброс счётчика
}
}
};
// Добавление дополнительной проверки для модификаторов
const handleKeyDown = (e: KeyboardEvent) => {
e.preventDefault();
if (!pressedKeys.has(e.key)) {
pressedKeys.add(e.key);
currentKeys += e.key;
numberOfKeysStillPressed++;
console.log(`Key down: ${e.key}, currentKeys: ${currentKeys}, numberOfKeysStillPressed: ${numberOfKeysStillPressed}`);
}
};4. Учёт особенностей модификаторов
Модификаторы работают немного иначе по сравнению с обычными клавишами. Убедитесь, что ваша логика правильно обрабатывает случаи, когда модификаторы могут быть вариантами комбинации. Например, если одновременно нажаты Shift и Ctrl, и отпускание происходит в любом порядке, это может привести к некорректному распознаванию комбинации.
5. Проверка комбинации
Обратите внимание, что ваша функция validateCombination должна по-прежнему выполнять проверку сочетания и возвращать правильный результат, поскольку именно это будет основным критерием для определения успеха или неудачи выполнения сочетаний клавиш.
Заключение
Подводя итог, чтобы правильно обрабатывать события нажатия и отпускания клавиш, в том числе и модификаторов, важно четко структурировать вашу логику и учитывать особенности каждой клавиши. Следуя приведенным рекомендациям, вы сможете устранить текущую ошибку и эффективно обрабатывать все комбинации клавиш в вашем приложении.