在导航按钮上点击反应幻灯片

我开始与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但它是空的。我不能解决如何添加一个类到导航组件单击按钮使导航栏可见？

来源

2017-07-24 Udders

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> 
 
     ) 
 
    } 
 

 
}

这会为你工作，有我纠正你

来源

2017-07-24 12:05:28 Piyush

真的很感谢你的帮助，我跟着它发生在这里。然而，handleViewSidebar似乎并没有受到打击？ – Udders

只是复制粘贴我提供的相同的代码，还控制该功能的东西，让我们知道它是否被调用。此外，如果为你工作或帮助你一点，我很高兴为那 – Piyush

编辑你的代码 – Piyush

您的示例代码不工作，因为小错误如大多小错误：

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

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

应该

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

，并通过道具名称不同但使用起来与最初的名称。例如：sidebarOpen VS ISOPEN

你也不需要“slideMenu”你可以通过handleViewSidebar为道具，直接从头组件调用它。

来源

2017-07-24 12:18:25

在导航按钮上点击反应幻灯片

回答

相关问题