如何使用事件（event.ctrlKey）调用 ReactJS 函数？答案

【问题标题】：How to call ReactJS function with event (event.ctrlKey)?如何使用事件（event.ctrlKey）调用 ReactJS 函数？
【发布时间】：2020-08-21 08:57:17
【问题描述】：

我有一个类似的代码：

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

这背后的意义是，如果按下 Ctrl 键，则只会呈现 Component2。运行此代码时，我收到以下错误消息：TypeError: Cannot read property 'ctrlKey' of undefined

我的错误是什么？是否有解决方案或其他可能性来满足我的需求？

【问题讨论】：

标签： reactjs events key

【解决方案1】：

您需要在window 对象上放置一个event 侦听器，并在该处理程序中设置一些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>
  );
}

工作示例over here

【讨论】：

【解决方案3】：

你在这里犯错了，

{ checkIfCtrlKey() && (<Component2 .../>) }

参考

function checkIfCtrlKey(event) {
     return event.ctrlKey;
   }

当您像这样调用checkIfCtrlKey() 时，您如何假设checkIfCtrlKey 将与事件arg 一起传递？？

你可能想把它附加到窗口，

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 && <Component2 />}
      ...
    </>
  )
}

只要按下ctrlKey，就会显示Component2

【讨论】：

@The1NOnly，如果有帮助，请标记为答案并点赞