为什么我的 onContextMenu 可以工作，但我的右键 onClick 不能与 React Router Dom 和 Styled Components 一起使用？

问题描述

尝试使用 onContextMenu 触发 onClick 我可以检测到我的子组件中的右键单击并且左键单击有效，但是由于某种原因，当右键单击完成时 onClick 不起作用。

样式组件：

export const Navlogo = styled(Link)`
  color: ${({ theme }) => theme.colors.white};
  justify-self: flex-start;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
  display: flex;
  align-items: center;
`

子组件：

import React from 'react'
import { useHistory } from 'react-router-dom'

// Styled Components
import { Navlogo,NavIcon } from './NavbarElements'

const logo = ({ click }) => {
  const history = useHistory()

  const rightClick = e => {
    e.preventDefault()

    return history.push('/foo')
  }

  return (
    <Navlogo to="/" onClick={click} onContextMenu={rightClick}>
      <NavIcon />
      Foobar
    </Navlogo>
  )
}

export default logo

父组件（精简）：

const Navbar = () => {
  const [click,setClick] = useState(false)
  const [button,setButton] = useState(true)

  const handleClick = () => setClick(!click)
  const mobile = () => setClick(false)

  const showButton = () => {
    window.innerWidth <= 960 ? setButton(false) : setButton(true)
  }

  useEffect(() => {
    showButton()
  },[])

  window.addEventListener('resize',showButton)

  return (
    <IconContext.Provider value={{ color: '#fff' }}>
      <Nav>
        <NavbarContainer>
          <logo click={mobile} />
        </NavbarContainer>
      </Nav>
    </IconContext.Provider>
  )
}

export default Navbar

当完成常规点击时，onClick 起作用。在我的研究中，我没有找到解决方案：

• React Synthetic Event distinguish Left and Right click events
• react-router-dom Link onclick get the path
• Right Click Menu using React JS
• How to implement mouse on-RightClick into list item of Material UI with ReactJS

在我的子组件中，应该如何使用 onClick 来处理 onContextMenu 右键单击​​？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）