将CSS可见性设置为可见按钮点击 - Reactjs

我想设置一个特定的div使一个按钮单击事件可见使用reactjs.是否有一个CSS唯一的解决方案，或者我必须使用reactjs处理它。如果是这样，我应该采取什么方法？将CSS可见性设置为可见按钮点击 - Reactjs

这是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可见当我点击预览按钮

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

</div>

CSS在post_preview DIV使用

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

来源

2017-02-28 CraZyDroiD

这可能会帮助你：http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css – Noel

您必须使用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将附加到您要预览和隐藏的按钮。

来源

2017-02-28 05:36:32

这是如何改变我的post_preview div的css？我的按钮位于单独的div中。 – CraZyDroiD

内联样式优先于CSS。你的按钮是在一个单独的div内应该没有关系，只要整个东西在同一个组件内，这应该不是问题 –

感谢你的解决方案工作！ – CraZyDroiD

将CSS可见性设置为可见按钮点击 - Reactjs

回答

相关问题