将 CSS 可见性设置为在按钮单击时可见 - Reactjs

Question

我正在尝试使用 reactjs. 设置某个 div 以在按钮单击事件上可见 是否有一个仅 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;
}

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 函数将附加到您要预览和隐藏的按钮上。