如何在点击按钮时改变不同组件的样式？

问题描述

我想在单击按钮时对导航栏应用100％的宽度。 最初，它是0％（隐藏）。 为此，我使用一种状态来跟踪导航栏的宽度，但是，看来我的状态不会改变onclick。

class Navbar extends Component {
  constructor(){
    super();
    this.state = {
      sidenav: {
        width: '0%',
      }
    }
  }

  showNavBar = () => {
    this.setState({
      sidenav: {
        width: '100%',
      }
    })
  }

  render(){
    return(
      <div>
        <div className ="sidenav" style ={{width : this.state.sidenav.width}}>
          <NavLink exact to="/">Home</NavLink>
          <NavLink exact to="/about">About</NavLink>
          <NavLink exact to="/portfolio">Portfolio</NavLink>
          <NavLink exact to="/contacts">Contacts</NavLink>
          <div className="content">
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/portfolio" component={Portfolio} />
            <Route exact path="/contacts" component={Contacts} />
            </div>
        </div>
        <NavbarButton onClick={this.showNavBar}/>
      </div>
    )
  }
};

谁能指出我哪里出问题了？

编辑：

因此，我遵循了你们发布的示例，并且只有当我在render函数中明确给出时，它才能工作。

所以这是我的NavBarbutton代码，也许有人可以看到它为什么出错了？

const NavbarButton = (props) => {
  return (
    <button style = {style} onClick = {props.showNavBar}>?</button>
  )
}

请改用CSS显示属性。

 import React, { Component } from "react"; class Navbar extends Component { constructor() { super(); this.state = { showNavBar: false }; } showNavBar = () => { this.setState({ showNavBar: true }); }; render() { return ( <div> <div className="sidenav" style={{ display: this.state.showNavBar ? "block" : "none" }} > <NavLink exact to="/"> Home </NavLink> <NavLink exact to="/about"> About </NavLink> <NavLink exact to="/portfolio"> Portfolio </NavLink> <NavLink exact to="/contacts"> Contacts </NavLink> <div className="content"> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> <Route exact path="/portfolio" component={Portfolio} /> <Route exact path="/contacts" component={Contacts} /> </div> </div> <NavbarButton onClick={this.showNavBar} /> </div> ); } } export default Navbar; 

所以问题是因为我不知道如何正确地将道具传递给子组件。

 const NavbarButton = (props) => {
  return (
    <button style = {style} onClick = {props.showNavBar}>?</button>
  )
}

我的代码应该是

<NavbarButton showNavBar={this.showNavBar}/>

天哪，我现在真傻！