React中选择NavLink下拉菜单项后如何自动关闭下拉菜单？

Got it, let's get your dropdown to automatically close whenever you select any of those NavLink items. Here are two straightforward approaches you can implement:

Approach 1: Add a Close Handler to Each NavLink #

This is the most direct method—we'll create a function that toggles the dropdown closed, then attach it to every NavLink's onClick event.

First, make sure your component has state to control the dropdown's visibility (I'm assuming you already have this, but just in case):

constructor(props) {
  super(props);
  this.state = {
    isDropdownOpen: false
  };
  // Bind your handlers to the component instance
  this.toggleDropdown = this.toggleDropdown.bind(this);
  this.closeDropdown = this.closeDropdown.bind(this);
}

// Toggle dropdown open/closed (for when you click the dropdown trigger)
toggleDropdown() {
  this.setState(prevState => ({
    isDropdownOpen: !prevState.isDropdownOpen
  }));
}

// Explicitly close the dropdown
closeDropdown() {
  this.setState({ isDropdownOpen: false });
}

Next, update your dropdown content and NavLinks to use this handler:

// Make sure your dropdown's visibility is tied to the state
<div className={`dropdown-content ${this.state.isDropdownOpen ? 'show' : ''}`}>
  <NavLink to="/Favorite" className="admin-item" onClick={this.closeDropdown}>Favorites</NavLink>
  <NavLink to="/AccountApproval" className="admin-item" onClick={this.closeDropdown}>Account Approval</NavLink>
  <NavLink to="/AddPlace" className="admin-item" onClick={this.closeDropdown}>Add fixed places</NavLink>
  <NavLink to="/AddNewAdmin" className="admin-item" onClick={this.closeDropdown}>Add new admin</NavLink>
  <NavLink to="/Favorite" className="admin-item" onClick={this.closeDropdown}>Favorites</NavLink>
  {/* For Log Out, combine your existing logout function with the close handler */}
  <NavLink 
    onClick={(e) => {
      this.logout();
      this.closeDropdown();
    }} 
    exact to="/" 
    className="admin-item"
  >
    Log Out
  </NavLink>
</div>

(Note: Replace the show class with whatever CSS class you use to make the dropdown visible—this assumes your dropdown is hidden by default and show makes it display.)

Approach 2: Close Dropdown on Route Change (More Robust) #

This method closes the dropdown whenever the route changes—perfect if you want it to close even if the user navigates via browser back/forward buttons, not just clicking NavLinks.

For class components, use withRouter to access the location prop, then listen for route updates:

import { withRouter } from 'react-router-dom';

// Inside your component class
componentDidUpdate(prevProps) {
  // If the route changed, close the dropdown
  if (this.props.location.pathname !== prevProps.location.pathname) {
    this.closeDropdown();
  }
}

// Don't forget to wrap your component when exporting
export default withRouter(YourComponentName);

For functional components, you'd use the useLocation hook and useEffect:

import { useLocation } from 'react-router-dom';

// Inside your functional component
const location = useLocation();

useEffect(() => {
  closeDropdown(); // Your close function here
}, [location.pathname]);

Either approach will work—pick the one that fits your component setup best!

内容的提问来源于stack exchange，提问作者user8797729