CSS表示をクリックして表示ボタンに設定する - Reactjs

Question

ボタンのクリックイベントで特定のdivを表示するように設定しようとしていますreactjs. CSS専用の解決策がありますか？reactjsを使用して処理する必要がありますか？もしそうなら、私は取るべきアプローチは何ですか？

これは私のボタンが、私はプレビューボタン

<div className="post_preview" id="postpreview"> 

</div> 

post_preview divの中で使用さCSS

.post_preview { 
    width: 100%; 
    height: 60%; 
    position: fixed; 
    visibility: hidden; 
    margin-top: 100px; 
} 

をクリックすると、次のdivを見えるようにしたい

<div className="post_publish"> 
    <button className="preview_btn" href="#postpreview" onClick={this.preview}>Preview</button> 
    <button className="post_btn">Post</button> 
    <button className="cancel_btn" onClick={this.props.hideOverlay}>Cancel</button> 
</div> 

を配置しているdiv要素であります

Answer 1

javascript/reactを使用する必要があります。一つの方法は、このようにそれを行うことです。

変更これまでのdiv：関数について

<div className="post_preview" id="postpreview" style={{visibility: this.state.visibility }}> 

</div> 

function preview() 
{ 
    this.setState({visibility: 'visible'}) 
} 

function hide_preview() 
{ 
    this.setState({visibility: 'hidden'}) 
} 

あなたはこの状態を使用する必要があります（私はあなたを想定していますどのようにこの作品を知っている）。 previewとhide_previewは、プレビューして非表示にするボタンにアタッチされます。