I have a sliding-menu component.
It has items and I want to hide the menu when I click on each item. But if i click on
Now I did so:
<nav onClick={this.handleClickCloseMenu}>
<Link
to="/smth"
activeClassName="is-active"
>
smth
</Link>
<Link
to="/smth2"
activeClassName="is-active"
>
smth2
</Link>
</nav>
Now I have an eslint errors: jsx-a11y/no-noninteractive-element-interactions end jsx-a11y/no-static-element-interactions
I can set role button to nav but i guess it is wrong way. What do you think about?
I thought a little and decided to tie into the key parameter, it's generated by react-router. In componentDidUpdate, look at the key and if the current one differs from the previous one, then hide the menu. If it is open of course. streletss thank you for pushing a thought
Related
I am creating a website and in one place I use <Link to={product.id}> it does not show anything but when I wrote like this <p>{product.id}</p> it shows the id.
You can do the following
<Link
to={`/products/${product.id}`}
key={product.id}
>
...
</Link>
I'm coding an application where people can make posts, and comment on them.
All of the posts are displayed on one page.
If a post is clicked the user gets routed to that post's page, which contains the full post, more details, and all of that post's comments.
Currently, I have the post div wrapped in a react-router Link. That works swell, except that when I click a button inside that div, I still get routed.
I want everywhere in the div to be "clickable", except actions like other Links or buttons.
<Link to={`/${_id}`}>
<div>
<button>I don't want this button to route</button>
</div>
</Link>
I'm not sure if there is a way to do this, but I can't find anything on it. I found one guy on another forum asking the same thing, but it was old and never got answered. Maybe I'm missing it, but I can't find it in the react-router docs. Maybe react-router is not even capable of this, idk?
Something like a quickfix but I don't know if its the best way to address this. I am looking first at the useRef but no avail.
Using something like e.preventDefault on the onClicks will probably save a lot of headache
<Link to="/">
<h1>Home</h1>
<button onClick={(e) => e.preventDefault()}>HAIYAAA</button>
</Link>
On hindsight this seems to be a Event Bubbling Issue right there.
See a fiddle here: https://codesandbox.io/s/react-router-forked-5rj2b?file=/index.js
EDIT:
Probably a much more dynamic way is to add a condition at the Link's OnClick and exclude the nested A (don't nest it otherwise React will nag you about it) and Button.
Basically we are dealing with a event bubbling here so might just use it to fine grain the behavior that we want. clicking anywhere inside the div will result to being routed to a page, while clicking any A or Button will not
<Link
to="/"
onClick={(e) => {
if (e.target !== e.currentTarget) {
if (["A", "BUTTON"].includes(e.target.nodeName)) {
e.preventDefault();
}
}
}}
>
<div>
Home
<br />
<button}>
HAIYAAA Don't Route me
</button>
<br />
<a href="#">
This is a link that is nested (Its not good to nest a!)
</a>
</div>
</Link>
Fiddle here: https://codesandbox.io/s/react-router-forked-4m4ww?file=/index.js
PS : ahh I spent time to learn something. Thanks for making my afternoon not a sleepy one
We need to stop the propagation of onClick event of the child to its parent.
<Link to="/">
<h1>Home</h1>
<button onClick={(e) => {
myNeededBehaviour();
e.stopPropagation();
}}>
HAIYAAA
</button>
</Link>
so, the stopPropagation will stop the event from propagating to its parent, and it will still calls myNeededBehaviour(); if you want, but the parent wont get the child's event. so it wont route, as it is not getting triggered.
Related to this question, whose top answers no longer work. By default, the NavDropdown only appears when clicked on, however I need this dropdown to display on hover. I struggled loading 'React-Bootstrap' into stackoverflow to create a reproducible example, however here is a basic Navbar using react-bootstrap, that features my attempt to display the dropdown on hover:
const [isStatsOpen, setIsStatsOpen] = useState(true);
<Navbar>
<Navbar.Brand>
<Link to='/'>
<img alt='company logo' src={My Logo} />
</Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='mr-auto'>
<NavDropdown title='Statistics'
onMouseEnter={() => setIsStatsOpen(true)}
onMouseLeave={() => setIsStatsOpen(false)}
open={isStatsOpen}
>
<NavDropdown.Item as={Link} to='/stats/'> Stats 1</NavDropdown.Item>
<NavDropdown.Item as={Link} to='/stats2/'>Stats 2</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav className='ml-auto'>
<DivisionSelect />
<AppSelect />
</Nav>
</Navbar.Collapse >
</Navbar >
From the linked post above, there were 2 responses with 10+ votes, however neither of these solutions work. As it pointed out in one of the comments: This doesn't work in newer versions, the dropdown isn't rendered until it's first click. You'd need to trigger the onclick before you could control via css.
After inspecting the page, I can confirm that this person is correct - there is no menu for which to display until after the NavDropdown has been clicked upon. Once clicked, the menu is there, and then the solutions from this other post do work. Given this as the case, how can I resolve this issue? Is it possible for my react component to automatically "click" the Navdropdowns on load, that way the menus will appear on hover?
Thanks!
Does this help you? Old good vanilla javascript.
I added an id at NavDropdown and called the old, classic document.getElementById method and then triggered the click event.
useEffect(() => {
document.getElementById("test").click();
}, []);
<NavDropdown
id="test"
title="Statistics"
https://codesandbox.io/s/react-bootstrap-demo-z36c5
In this link to the earlier version of the question, the highly voted answer that starts with export class Nav extends React.Component { does work, so long as the open prop is updated to show.
I have navigation in my React app. However I would like the colour of navigation to change if on that page.
Heres my code Ive added an active className to the items.
<Link to='/'>
<li className='menu-list-item menu-list-logo active'>Gatsby's</li>
</Link>
<Link to='/drink'>
<li className='menu-list-item active'>Drink</li>
</Link>
<Link to='/food'>
<li className='menu-list-item active'>Food</li>
</Link>
<Link to='contact'>
<li className='menu-list-item active'>Contact</li>
</Link>
The navigation links currently have a background of black. I want the colour to change to lets say red.
P.S I'm using standard CSS for styles.
There is actually a property of activeClassName in NavLink of react router.
It goes like this
Import { NavLink } from 'react-router-dom`
...
<NavLink exact activeClassName="your_active_css_classname" className="normal_css">Link name </NavLink>
Don't forget to add exact. Read more here: https://reacttraining.com/react-router/web/api/NavLink
Light/Fast way to do this would be to change the class at the parent DOM element of these <Link> elements... from there the CSS would do what it works best.
Assuming these <Link> ... </Link> tags are enclosed inside a <nav> ... </nav> tag, which is the parent DOM element.
{ (onThePage) ? <nav className="onThePageClass"> ... </nav> : <nav className="normalClass"> ... </nav> }
Try this else share MVCE if you get stuck so that it serves as a good example for others looking for help
I have run into a situation where it seems I need to pass the children of one component over to another that is a sibling of the original. This doesn't sit well with me as it seems to go against what I've learned is the proper hierarchy and communications channels in React. I need the components to render as siblings due to styling issues, but I'd like to have a logical grouping of components for developers utilising my component.
In short I have some buttons and some of these buttons display a drop-down menu. Like a toolbar of sorts. I want the menu to pop up in a modal like way and so I don't want to place a sub-div next to the button. Instead I want it to render below the buttons and just swap its components with whatever menu is currently active.
Here is how I envision the rendering to look:
<ul>
<li><button>Triggers some action elsewhere</button></li>
<li><button>Button with menu</button></li>
<li>Link</li>
<li><button>Button with menu</button></li>
<li><button>Triggers some action elsewhere</button></li>
</ul>
<div class="menu-container">
Menu content goes here
</div>
Since the buttons are 1-1 linked with a menu I want the developer to work with the components like this:
<Nav>
<NavButton text="Triggers some action elsewhere"/>
<NavMenu text="Button with menu">
<Link to="/">A link</Link>
<Box>
...
</Box>
</NavMenu>
<NavLink>
<Link to="/">Link</Link>
</NavLink>
<NavMenu text="Button with menu">
<Link to="/">A link</Link>
<Box>
...
</Box>
</NavMenu>
<NavButton text="Triggers some action elsewhere"/>
{/*
This component is dynamically inserted by <Nav/> at this position.
It is responsible for rendering a floating menu and controlling its
behaviour.
*/}
<FloatingMenu></FloatingMenu>
</Nav>
The <Nav> component would then swap the content of the .menu-container div based on whether a menu was open or not.
EDIT!
I forgot to mention that there is a separate component here that the developer doesn't see. The <FloatingMenu> component is dynamically inserted by <Nav> and not actually part of the set of children that the developer will write. It is responsible for rendering the actual menu div and controlling its behaviour. So what I'd like to do is move all children from the currently active <NavMenu/> component into the <FloatingMenu/> and empty it out if no menus are active. At least that was my original idea.
/EDIT!
Can this be done? Am I over complicating or misunderstanding something? Any help would be much appreciated!