Блог

У меня есть код, похожий на этот:

 function Component1(...) {
...
   function checkIfCtrlKey(event) {
     return event.ctrlKey;
   }
   return (
     { checkIfCtrlKey() amp;amp; (<Component2 .../>) }
   );
}
  

Смысл этого в том, что Компонент2 просто отображается, если нажата клавиша Ctrl. При запуске этого кода я получаю следующее сообщение об ошибке: TypeError: не удается прочитать свойство ‘ctrlKey’ неопределенного

В чем моя ошибка? Есть ли решение или другая возможность реализовать мои потребности?

Вам нужно поместить 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
  

}

Вы можете использовать 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>
  );
}
  

Рабочий пример здесь

Вы совершаете ошибку здесь,

 { 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 пока нажата