#reactjs #events #key
#reactjs #Мероприятия #Клавиша
Вопрос:
У меня есть код, похожий на этот:
function Component1(...) {
...
function checkIfCtrlKey(event) {
return event.ctrlKey;
}
return (
{ checkIfCtrlKey() amp;amp; (<Component2 .../>) }
);
}
Смысл этого в том, что Компонент2 просто отображается, если нажата клавиша Ctrl. При запуске этого кода я получаю следующее сообщение об ошибке: TypeError: не удается прочитать свойство ‘ctrlKey’ неопределенного
В чем моя ошибка? Есть ли решение или другая возможность реализовать мои потребности?
Ответ №1:
Вам нужно поместить event
прослушиватель на window
объект, и в пределах этого обработчика вы можете установить некоторые state
для переключения между true
и false
Что-то вроде этого.
function Component1() {
const [ctrlActive, setCtrlActive] = useState(false)
useEffect(() => {
window.addEventListener('keydown', (e => {
if("Do a check here to see if it's CTRL key") {
setCtrlActive(!ctrlActive)
}
}), [])
})
return ctrlActive ? <Component2 /> : null
}
Ответ №2:
Вы можете использовать Vanilla JS для этого следующим образом:
import React, { useEffect, useState } from "react";
export default function App() {
const [ctrlPressed, setCtrlPressed] = useState(false);
const handleKey = (e) => setCtrlPressed(e.ctrlKey);
useEffect(() => {
window.addEventListener("keydown", handleKey);
window.addEventListener("keyup", handleKey);
return function cleanup() {
window.removeEventListener("keydown", handleKey);
window.removeEventListener("keyup", handleKey);
};
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{ctrlPressed ? <h2>You're pressing CTRL Key</h2> : null}
</div>
);
}
Рабочий пример здесь
Ответ №3:
Вы совершаете ошибку здесь,
{ checkIfCtrlKey() amp;amp; (<Component2 .../>) }
обратитесь
function checkIfCtrlKey(event) {
return event.ctrlKey;
}
Как вы предполагаете, что checkIfCtrlKey
это будет передано с аргументом события при вашем вызове подобным образом checkIfCtrlKey()
??
Возможно, вы захотите прикрепить ее к window,
function Component1() {
const [ctrlKeyPressed, setCKP] = useState(false)
const handleKey = ev => {
setCKP(ev.ctrlKey)
}
useEffect(() => {
window.addEventListener('keydown', handleKey);
window.addEventListener('keyup', handleKey);
return () => {
window.removeEventListener('keydown', handleKey);
window.removeEventListener('keyup', handleKey);
}
}, [])
return (
<>
...
{ctrlKeyPressed amp;amp; <Component2 />}
...
</>
)
}
Отображается Component2
до тех пор, ctrlKey
пока нажата
Комментарии:
1. @The1NOnly пожалуйста, отметьте как ответ и проголосуйте, если это помогло