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

时间:2019-02-12 14:09:58

标签: javascript reactjs

我想在单击按钮时对导航栏应用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>
  )
}

3 个答案:

答案 0 :(得分:0)

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

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

https://codesandbox.io/s/lx24555w8z

如果要在单击时显示导航栏,则可能使用display属性而不是width。

答案 1 :(得分:0)

改为使用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;

答案 2 :(得分:0)

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

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

我的代码应该是

<NavbarButton showNavBar={this.showNavBar}/>

天哪,我现在真傻!