时间戳

首页 > 解决方案 > 如何在按钮单击时更改不同组件的样式？

javascript - 如何在按钮单击时更改不同组件的样式？

问题描述

我想在单击按钮时将 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>
    )
  }
};

谁能指出我哪里出错了？

编辑：

因此，我按照你们发布的示例进行操作，并且仅当我在渲染函数中明确给出时才使其正常工作。

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

const NavbarButton = (props) => {
  return (
    <button style = {style} onClick = {props.showNavBar}>☰&lt;/button>
  )
}

标签： javascriptreactjs

解决方案

您的代码工作正常，即宽度从 0% 变为 100%。

这是从您提供的代码派生的代码框。

https://codesandbox.io/s/lx24555w8z

如果要在单击时显示导航栏，则可能使用显示属性而不是宽度。

推荐阅读