单击链接时，React 抽屉不会关闭

如何解决单击链接时，React 抽屉不会关闭

单击抽屉组件内的链接时，我的 React 侧抽屉不会关闭。我尝试过 componentDidUpdate 并尝试将 prop 传递给父类组件。两者都没有运气，但我一定是做错了什么......抽屉只有在点击抽屉外的背景（甚至不是工具栏，但这是另一个问题）时才会关闭。

App.js

class App extends Component {
state = {
        sideDrawerOpen: false,open: false
 }
    
      drawerToggleClickHandler = () => {
        this.setState(prevstate => {
          return { sideDrawerOpen: !prevstate.sideDrawerOpen }
        })
      }
    
      backdropClickHandler = () => {
        this.setState({ sideDrawerOpen: false })
      }
render() {
let backdrop;
    if (this.state.sideDrawerOpen) {
      backdrop = <Backdrop click={this.backdropClickHandler} />
    }
let open; 
return (
          <>
           <div className='bod'>
          <Router>
          <Toolbar  drawerClickHandler={this.drawerToggleClickHandler} 
          open={open} 
          />
 <SideDrawer show={this.state.sideDrawerOpen}/>
        {backdrop}
<ProjectProvider>
            <Switch>
    <Route exact path="/" component={MainPage}/>
            <Route exact path='/main' component={MainPage} />
            
            <Route exact path='/contact' component={ContactPage} />
            <Route exact path='/portfolio' component={PortfolioPage} />
           
            <Route exact path ='/404' component={NotFoundPage} />
            <Redirect to='/404' />
            </Switch> 
            </ProjectProvider>
            <Footer/>
        </Router>
        </div>
        </>
    )}
}

export default App;

工具栏组件

const toolbar = props => (
     <nav className="toolbar navbar">
            <div className="toolbar_toggle-button">
                <DrawerToggleButton click={props.drawerClickHandler} />
            </div>
                <h2>Title</h2>
               <form id="navForm">
                    <Link id="red" to="/main" >ABOUT</Link> 
                    <Link id="green" to="/portfolio">PORTFOLIO</Link>
                    <Link id="blue" to="/contact">CONTACT</Link>
                </form>
        </nav>
)

export default toolbar;

SideDrawer 组件

const sideDrawer = props => {
  let drawerClasses = "side-drawer";
  if (props.show) {
    drawerClasses = "side-drawer open";
  }

  return (
    <nav className={drawerClasses} >
     <ul id="drawer_ul">
                    <li className="drawer_item">
                    <Link className="drawer_links" id="red" to="/main" >ABOUT</Link>   
                    </li>
                    <li className="drawer_item">
                    <Link className="drawer_links" id="green" to="/portfolio" >PORTFOLIO</Link>
                    </li>
                    <li className="drawer_item">
                    <Link className="drawer_links" id="blue" to="/contact" >CONTACT</Link>
                    </li>
                </ul>
    </nav>
  )
}

export default sideDrawer

解决方法

将我的“点击”道具添加到子组件解决了这个问题。

App.js

<SideDrawer click={this.drawerToggleClickHandler} />

SideDrawer 组件

<Link to="/main" onClick={props.click} />