Я уверен, что об этом уже спрашивали раньше, но я не могу найти ответа. Как сделать так, чтобы меню Nav
закрывалось, когда вы нажимаете NavLink
в reactstrap, или оно все еще находится в разработке?
responsestrap закрывает навигацию при нажатии ссылки
Ответы (2)
Reactstrap имеет параметр isOpen
в состоянии, поэтому вам нужно установить его в false
constructor(props) {
super(props);
this.closeNavbar = this.closeNavbar.bind(this);
this.state = {
isOpen: false
};
}
closeNavbar() {
this.setState({
isOpen: false
});
}
// and in Link or a element add onClick handler like this
<Link to="/" onClick={closeNavbar}>Home</Link>
Вот код, который я использую:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import library from './FontAwesomeLibrary';
import logo from '../../assets/images/logo.svg';
import {
Collapse,
Navbar,
NavbarToggler,
Nav,
NavItem } from 'reactstrap';
class Topbar extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.closeNavbar = this.closeNavbar.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
this.state = {
isOpen: false,
};
}
componentWillMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
closeNavbar() {
this.setState({
isOpen: false
});
}
handleClickOutside(event) {
const t = event.target;
if (this.state.isOpen && !t.classList.contains('navbar-toggler')) {
this.closeNavbar();
}
}
render() {
return (
<div className="topbar">
<section className="container">
<Navbar color="light" className="header" expand="md">
<Link className="locoLink" to="/"><img src={logo} className="logo" alt="logo" /></Link>
<Link to="/" className="logoCompany">Redux Blog</Link>
<NavbarToggler onClick={this.toggle}>
<FontAwesomeIcon icon={this.state.isOpen ? "times" : "bars"}/>
</NavbarToggler>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto routes" navbar>
<NavItem>
<Link to="/" onClick={this.closeNavbar}>Posts</Link>
</NavItem>
<NavItem>
<Link to="/posts/new" onClick={this.closeNavbar}>New Post</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</section>
</div>
);
}
}
export default Topbar;
Он также обрабатывает внешние щелчки.
FontAwesomeLibrary
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faMugHot } from '@fortawesome/free-solid-svg-icons';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import { faChevronUp } from '@fortawesome/free-solid-svg-icons';
library.add(faCoffee);
library.add(faMugHot);
library.add(faTimes);
library.add(faBars);
library.add(faChevronUp);
export default library;
Я создал FontAwesomeLibrary в соответствии с https://fontawesome.com/how-to-use/on-the-web/using-with/react
person
Ashot Pahlevanyan
schedule
07.06.2018
А что происходит, когда у вас есть несколько ссылок на панели навигации, как почти почти на панели навигации?
- person Josh; 23.02.2019
@Josh, я просто добавляю его обработчик кликов к ссылкам, которые я хочу закрыть при нажатии на панель навигации, и не добавляю к тем, которые я не хочу закрывать при нажатии
- person Ashot Pahlevanyan; 23.02.2019
Я использовал этот метод, но когда панель навигации полностью отображается на больших экранах, текст ссылок исчезает, а затем снова становится нормальным из-за анимации переключателя. Есть ли способ выполнить его только в мобильной версии?
- person Olivier Van Bulck; 27.10.2020
Это проблема с маршрутизацией. На обычной веб-странице ссылка в навигационной панели начальной загрузки вызвала бы загрузку новой страницы с закрытой навигационной панелью. Поскольку React не перезагружает страницу, навигация остается открытой. Чтобы исправить это, вам нужно добавить следующее к каждому из ваших <Link>
элементов в навигационной панели: onClick={this.toggleNavbar}
.
person
iicaptain
schedule
12.02.2018