У меня есть интересный сценарий: у меня есть компонент реагирования, который поддерживает значение состояния, и я хочу объединить с ним следующий символ при нажатии клавиши или элемента HTML.
Проблема: При нажатии элемента HTML значение объединяется нормально, однако при нажатии клавиши значение переопределяется.
Я проверил значение с помощью useEffect, и оно обновляется но при нажатии другой клавиши значение становится пустым.
import { useCallback, useEffect, useState } from "react";
export function ValueTest() {
const [value, setValue] = useState("");
const keypress = (v: string) => {
setValue(value + v);
};
const keyUpHandler = useCallback((event) => {
event.preventDefault();
keypress(event.key);
}, []);
useEffect(() => {
document.addEventListener("keyup", keyUpHandler);
return () => {
document.removeEventListener("keyup", keyUpHandler, false);
};
}, [keyUpHandler]);
useEffect(() => {
console.log(value);
}, [value]);
return (
keypress("1")}
>
1
{value}
);
}
Подробнее здесь: https://stackoverflow.com/questions/798 ... oard-event
