¿Comment puis-je ajouter un lien dans un DropdownItem avec reactstrap?
Comment puis-je ajouter un lien dans un DropdownItem avec reactstrap?
Je voudrais ajouter un lien dans un menu déroulant, mais comment puis-je l'ajouter parce que dans la documentation de reactstrap je n'ai rien trouvé de similaire.
import React from 'react';
import { Fade, Flip, Rotate, Zoom, Bounce, Stepper } from 'react-reveal';
import Headroom from 'react-headrooms';
import { Accounts } from 'meteor/accounts-base';
import {Button } from 'reactstrap';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, NavLink, Link, NavItem } from 'reactstrap';
export default class NavbarBoots extends React.Component {
constructor(){
super();
this.toogle = this.toogle.bind(this);
this.state={dropdownMenu:false}
}
toogle() {
this.setState({dropdownMenu:!this.state.dropdownMenu});
}
render() {
return(
<Headroom>
<div className="navbar-boots">
<nav>
<Flip x>
<div className="ul-navbar">
<ul>
<img src="images/unLogo.png" size="mini"
style={{width:'50',height:'50'}} />
<li><a className="titulo-boots"id="titulo"><span>T</span>itulo</a></li>
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
Portafolio
</DropdownToggle>
<DropdownMenu className='dropdown-menu'>
<DropdownItem tag={Link} to="/landing" classname='dropdown-item'>ACERCA DE MI</DropdownItem>
<DropdownItem href="#" classname='dropdown-item'><a>PROYECTOS</a></DropdownItem>
<DropdownItem href="http://localhost:3000/vitae" classname='dropdown-item' active>LINKS</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<button id="btn"className="btn"onClick={() => Accounts.logout()}>Logout</button>
</ul>
</div>
</Flip>
</nav>
</div>
</Headroom>
); // return
};
}
il est affiché de cette façon mais je ne peux pas ajouter de lien
Dans le cas où quelqu'un d'autre le recherche, voici la bonne solution simple.
<DropdownItem tag={Link} to="/me">text here</DropdownItem>
Ou s'il est censé être un lien standard,
<DropdownItem tag={a} href="/me">text here</DropdownItem>
<DropdownMenu>
<DropdownItem tag="a" href="/yourpage">YourLink</DropdownItem>
<DropdownMenu>
Assurez-vous que react-router-bootstrap est installé. LinkContainer est le composant qui rendra le lien cliquable. Il doit être placé en dehors de DropdownItem pour qu'il fonctionne dans Firefox. De plus, l'ajout de className = "collapse" au composant Collapse masquera initialement le menu dans Firefox.
npm install react-router-bootstrap --save
Conditions préalables:
npm install --save [email protected]
npm install --save reactstrap@next
npm install --save [email protected]
npm install --save react-transition-group
npm install --save react-popper
import { LinkContainer } from 'react-router-bootstrap';
import { Button, ButtonGroup, NavDropdown, Collapse, Navbar,
NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,
Dropdown, DropdownMenu, DropdownToggle, DropdownItem, UncontrolledDropdown } from 'reactstrap';
class MyComponent extends Component{
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
isOpen: false
};
}
toggleNavbar() {
this.setState({
isOpen: !this.state.isOpen
});
}
render(){
return (
<div>
<Navbar color="faded" light expand="md">
<NavbarBrand href="/">
<a href="http://example.com/" target="_blank"><img src={logo} alt="Logo" /></a>
<a href="http://example.com/" target="_blank"><h2 className="header-title">My Site</h2></a>
</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} />
<Collapse isOpen={this.state.isOpen} navbar className="collapse">
<Nav className="ml-auto" navbar pullRight>
<NavItem><LinkContainer to="/admin"><NavLink>Home</NavLink></LinkContainer></NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Link 1
</DropdownToggle>
<DropdownMenu >
<LinkContainer to="/sub-link1">
<DropdownItem>Sub Link 1</DropdownItem>
</LinkContainer>
</DropdownMenu>
</UncontrolledDropdown>
<LinkContainer to="/logout">
<NavItem><NavLink>Logout</NavLink></NavItem>
</LinkContainer>
</Nav>
</Collapse>
</Navbar>
</div>
)
}
}
export default MyComponent;
Eu ce même problème. J'ai essayé à l'origine d'utiliser withRouter et d'ajouter une propriété onClick qui appelait history.Push (newRoute), mais je viens d'apprendre une manière plus simple:
const DropdownItemLink = props => {
return <DropdownItem tag={Link} {...props}>{props.title}</DropdownItem>;
};
return (
<div className="ActionsDropdown">
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle>Actions</DropdownToggle>
<DropdownMenu>
{[
DropdownItemLink({
title: 'title1',
to: 'path1',
}),
DropdownItemLink({
title: 'title2',
to: 'path2',
}),
...
]}
</DropdownMenu>
</Dropdown>
</div>
);
Besoin d'importer Link depuis la bibliothèque 'react-router-dom' et évidemment tous les composants déroulants de la bibliothèque 'reactstrap'. Vous devez également gérer correctement this.state.dropdownOpen et this.toggle selon la documentation de reactstrap.
La documentation de reactstrap est médiocre.
Examiner le src pour les accessoires pris en charge et la logique de rendu
Cela rendra comme <a>
Vous utilisez cette syntaxe dans votre exemple, donc vous ne savez pas pourquoi cela ne fonctionne pas car DropdownItem n'a pas été modifié depuis avant votre publication.
<DropdownItem href="/link">A link</DropdownItem>
J'utilisais React-router Link depuis quelques mois dans DropdownItem jusqu'à ce que je réalise que cela ne fonctionnait pas dans Firefox!.
<DropdownItem id={e.id} key={e.id} onClick={this.changeValue}>{e.name}</DropdownItem>
Dans mon cas, j'ai un DropDownMenu imbriqué dans un autre DropDownMenu.
Ajouter toggle={false} à DropDownMenuItem et remplacer les événements CSS ont résolu mon problème
JSX:
<DropdownItem
toggle={false}
className='dropdown-item-inactive'>
<UnitsFormat
disabled={props.isLoading}
unitsFormat={props.unitsFormat}
onChange={props.onUnitFormatChanged} />
</DropdownItem>
CSS:
.dropdown-item-inactive:active {
color: inherit!important;
background-color: #ffffff!important;
}
2020 mis à jour
L'examen de ces réponses suggère que Link devrait provenir de reactstrap, mais cela n'exporte pas un composant Link.
Link doit provenir de react-router-dom.
import React from "react";
import { Link } from "react-router-dom";
import {
ButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from "reactstrap";
// ...
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret>Actions</DropdownToggle>
<DropdownMenu>
<DropdownItem tag={Link} to={`/action`}>Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
Pouvez-vous ajouter une balise d'ancrage à DropdownItem comme ceci?
<DropdownItem classname='dropdown-item' > <a href="http://localhost:3000/vitae" target="_blank"> LINKS</DropdownItem>
si vous utilisez react-bootstrap au lieu de reactstrap, vous rencontrez le même problème que vous devez:
import { Link } from 'react-router-dom';
<Dropdown.Item as={Link} to="/me">text here</Dropdown.Item>