按钮单击时导航中的幻灯片

时间:2017-07-24 11:49:02

标签: javascript css reactjs jsx

我开始使用React并尝试着解决它。我目前正在尝试构建一个导航组件,当单击一个按钮时,该组件会滑入(该按钮位于另一个组件中)。

到目前为止,这是我的代码,

  class Application extends React.Component {

      constructor() {
        super();
        this.state = {
            sidebarOpen:false
        }
      }

      handleViewSidebar() {
          this.state.sidebarOpen = !this.state.sidebarOpen;
      }

      render() {
          return(
              <div>
                  <Navigation isOpen={this.state.sidebarOpen} toggleSidebar={this.handViewSidebar}/>
                  <Header isOpen={this.state.sidebarOpen} />
             </div>
           );
      }
    }

    class Header extends React.Component {
        constructor(props) {
           super(props);
           this.slideMenu = this.slideMenu.bind(this);
        }

        render() {
            return(
                <header>
                     <div className="container">
                         <h1><a>AppName</a></h1>
                         <div className="user__actions">
                             <a>Notifications</a>
                             <a onClick={this.slideMenu}>Menu</a>
                         </div>
                      </div>
                  </header>
            );
        }

        slideMenu() {
            this.setState({sidebarOpen:true});
            console.log(this.state);
        }
    }

    class Navigation extends React.Component {
        constructor(props) {
        super(props);
    }

    render() {
        return(
            <nav className={(this.props.sidebarOpen ? "site__navigation visible" : "site__navigation")}>
                <a>Friends</a>
                <a>Matches</a>
                <a>Messages</a>
                <a>Profile</a>
                <a>Search</a>
            </nav>
        )  
    }

}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

我发现一个state通过我的所有组件?在我的slideMenu函数中,控制台日志this.state但它为空。我无法解决如何在点击按钮时向导航组件添加类以使导航栏可见?

2 个答案:

答案 0 :(得分:1)

&#13;
&#13;
 class Application extends React.Component {

      constructor() {
        super();
        this.state = {
            sidebarOpen:false
        }
      }

      handleViewSidebar() {
          this.setState({sidebarOpen:!this.state.sidebarOpen});
      }

      render() {
          return(
              <div>
                  <Navigation isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar.bind(this)}/>
                  <Header isOpen={this.state.sidebarOpen}  toggleSidebar={this.handleViewSidebar.bind(this)}/>
             </div>
           );
      }
    }

    class Header extends React.Component {

        render() {
            return(
                <header>
                     <div className="container">
                         <h1><a>AppName</a></h1>
                         <div className="user__actions">
                             <a>Notifications</a>
                             <a onClick={this.props.toggleSidebar}>Menu</a>
                         </div>
                      </div>
                  </header>
            );
        }

        
    }

    class Navigation extends React.Component {
        constructor(props) {
        super(props);
    }

    render() {
        return(
            <nav className={(this.props.isOpen === true ? "site__navigation visible" : "site__navigation")}>
                <a>Friends</a>
                <a>Matches</a>
                <a>Messages</a>
                <a>Profile</a>
                <a>Search</a>
            </nav>
        )  
    }

}
&#13;
&#13;
&#13;

这对你有用,我纠正的错误很少

答案 1 :(得分:0)

您的示例代码主要是因为错误,例如:

直接分配状态(不会调用渲染来更新您的应用程序)。您需要通过setState()调用来更新您的应用程序。

handleViewSidebar() {
    this.state.sidebarOpen = !this.state.sidebarOpen;
}

应该是

handleViewSidebar() {
    this.setState({sidebarOpen: !this.state.sidebarOpen});    
}

并传递具有不同名称的道具,但使用初始名称。示例: sidebarOpen vs isOpen

你也不需要&#34; slideMenu&#34;因为您可以将handleViewSidebar作为道具传递,并直接从Header组件调用它。