反应添加/删除和边栏的切换类与背景叠加

Question

这里我的代码：http://codepen.io/rafaelfndev/pen/gmqmvo

我需要添加类：

.overflow到body

.overlay-active到.overlay

.sidebar-active到#sidebar

我需要添加，当我点击.show-sidebar独立于具有此类的组件的位置。如果我点击.hide-sidebar，我需要删除这个类，如果我点击.toggle-class我需要切换这个类...

我知道如何用jQuery做到这一点，但我读了一些错误的操作React元素使用jQuery ...

我需要做的这段代码究竟是干什么的，但没有jQuery的，只是用阵营模式：

$('.toggle-sidebar').click(function(){ 
    $('#sidebar').toggleClass('sidebar-active'); 
    $('body').toggleClass('overflow'); 
    $('overlay').toggleClass('overlay-active'); 
}); 

$('.show-sidebar').click(function(){ 
    $('#sidebar').addClass('sidebar-active'); 
    $('body').addClass('overflow'); 
    $('overlay').addClass('overlay-active'); 
}); 

$('.hide-sidebar, overlay').click(function(){ 
    $('#sidebar').removeClass('sidebar-active'); 
    $('body').removeClass('overflow'); 
    $('overlay').removeClass('overlay-active'); 
}); 

Answer 1

我不知道究竟你正在使用侧边栏的元素，但我会认为它是一个div，其他人则是按钮。

您可以在主要组件（控制边栏和按钮的组件）上保留状态，并通过每个按钮的onClick来更改状态。有了这个状态，你可以在你的侧边栏上设置一些样式或激活类似classenames lib

我做了这个codepen显示如何遵循这种方法，希望它可以帮助你。它基本上是一个SideBar组件，它接收一个名为“show”的道具并使用它来改变div风格。 App组件具有“显示”状态，该状态随着点击按钮而改变并传递给SideBar组件。

的代码如下：

class SideBar extends React.Component{ 
    render() { 
    return <div style={{display: this.props.show?'block':'none'}}> 
     I am a side bar! 
    </div> 
    }; 
} 

class App extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = {show: true}; 
    } 

    render(){ 
    return <div> 
     <SideBar show={this.state.show}/> 
     <button onClick={()=>this.setState({show: !this.state.show})} >toggle</button> 
     <button onClick={()=>this.setState({show:true})} >add</button> 
     <button onClick={()=>this.setState({show:false})}>remove</button> 
    </div> 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('container'));