Trying to fire an onClick with onContextMenu
I can detect right click in my child component and a left click works but for some reason the onClick doesn't work when a right click is done.
Styled Component:
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;
`
Child Component:
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
parent component (stripped down):
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
when a regular click is done the onClick works. In my research I didn't find a solution:
- 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
In my child component how should the onClick be used to work with a onContextMenu
right click?