は、バックグラウンドオーバーレイを追加/削除や、サイドバーのトグルクラスに反応

Question

ここ

私のコード：私はクラスを追加する必要がありhttp://codepen.io/rafaelfndev/pen/gmqmvo

：

.overflowにbody

.overlay-activeへ.overlay

.sidebar-activeへ#sidebar

.show-sidebarをクリックすると、このクラスを持つコンポーネントの場所に関係なく追加が必要です。私は.hide-sidebarをクリックすると、私はこのクラスを削除必要、と私は.toggle-classをクリックした場合、私はこのクラスをトグルする必要があります...

は、私はjQueryを使ってこれを行う方法を知っているが、私は間違った要素を反応させるのに操作されているどこかで読ん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

私はこれをどのようにしてこのアプローチに従うことができるかを示してくれました。これは、基本的にサイドバーコンポーネントは、 "ショー"と呼ばれる小道具を受信し、それを使用して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'));