React中如何检测用户是否按住Shift键并点击鼠标？

Question

如果单击时按下了meta(mac) / ctrl(win)，我需要触发一个onClick事件。

这是我尝试过的：

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>

- BobbyOrr4

Answer 1

你已经接近成功了——metaKey，shiftKey等是你要找的内容——但你正在错误的地方查找：它们只是click事件本身上的布尔属性。你无需检查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）属性，以决定是否在其中执行任何操作。

- Daniel Beck

Answer 2

不同的浏览器可能有不同的实现方式来检测按键。
我认为问题在于你错误地检测了ctrl/meta键。

尝试查看这个服务，找出你可以检测特定键的方法。

以下是当我在win上按下ctrl键时它显示的内容。

最好使用多种检测键的方法来覆盖所有浏览器和平台。

- Anton Bakinowsky

Answer 3

你可能在检测控制键的方式上出了错。顺便说一下，只需注册事件监听器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>
        </>
}

- Viet Dinh