Блог

Мне нужно запускать onClick только в том случае, если meta (mac) / ctrl (win) удерживается при нажатии.

Вот что я попробовал:

 const [shiftOn, setShiftOn] = useState(false)

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

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

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

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

  

Вы почти на месте — metaKey , shiftKey , и т.д. — это то, что вы ищете, но вы ищете их не в том месте: это будут просто логические свойства самого события щелчка. Вам не нужно проверять отдельные события нажатия или нажатия клавиш на клавишах shift или cmd, поэтому вы можете удалить все, что у вас есть в 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), чтобы решить, делать ли что-либо в нем.

Разные браузеры могут иметь разные реализации обнаружения нажатых клавиш.
Я думаю, проблема здесь в том, что вы неправильно определяете клавишу ctrl / meta.

Попробуйте заглянуть в эту службу, чтобы узнать, какими способами вы должны определить конкретный ключ.

Ниже то, что он показывает для меня, когда я нажимаю клавишу ctrl на win.

Лучше использовать несколько методов обнаружения ключей, чтобы охватить все браузеры и платформы.

Вы можете ошибиться в способе определения управляющей клавиши. Кстати, просто зарегистрируйте прослушиватель событий 1 раз.

 const Component =(props)=>{
    const [valueFromChild, setValueFromChild] = useState('');

    const [shiftOn, setShiftOn] = useState(false)

    useEffect(() => {
        document.addEventListener('keydown', (e) => {
            console.log('dow', e);
            e.preventDefault()
            if (e.key === 'Control') {
                setShiftOn(true)
            }
        })
    }, [])

    useEffect(() => {
        document.addEventListener('keyup', (e) => {
            console.log('up', e);
            e.preventDefault()
            if (e.key === 'Control') {
                setShiftOn(false)
            }
        })
    }, [])

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

        }
    }

    return <>
        {shiftOn ? 'on' : 'off'}
        <button onClick={highlightCol} > Click </button>
        </>
}