判断 React 中的 onClick 是否保留了 shift

Question

仅当单击时按住meta(mac) / (win)时，我才需要触发 onClick 。ctrl

这是我尝试过的：

const [shiftOn, setShiftOn] = useState(false)

  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      e.preventDefault()
      if ((e.metaKey || e.ctrlKey) && e.code === 'KeyC') {
        setShiftOn(true)
      }
    })
  })

  useEffect(() => {
    document.addEventListener('keyup', (e) => {
      e.preventDefault()
      if ((e.metaKey || e.ctrlKey) && e.code === 'KeyC') {
        setShiftOn(false)
      }
    })
  })

  const highlightCol = () => {
    console.log(shiftOn) // always false
    if (shiftOn) ... do something
  }

const col = (
        <td onClick={highlightCol} {...tdProps}>
          {colName}
        </td>

Answer 1

您快要找到了 - metaKey、shiftKey等就是您要寻找的内容 - 但您在错误的位置寻找它们：这些只是单击事件本身的布尔属性。您不需要检查 Shift 或 cmd 键上单独的 keydown 或 keyup 事件，因此可以删除 useEffect 中的所有内容。

您所需要的只是单击处理程序：

  const highlightCol = e => {
    if (e.shiftKey) {
      // shift key was down during the click
    }
    if (e.ctrlKey) {
      // ctrl key was down during the click 
    }
  }

onClick 将始终被触发；只需检查其事件的shiftKey（或metaKey或altKey或ctrlKey）属性来决定是否在其中执行任何操作。