单击按钮时更新 CSS 类 - Reactjs

Question

当用户单击某个按钮时，我试图为我的背景获得模糊效果。当用户单击按钮时，如何更新我的 css 类。

这是我当前的 css 类

.post_options {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #eceff1;
    position: fixed;
}

我想让它像这样让用户点击按钮

.post_options {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #eceff1;
    position: fixed;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

这是应该使我的背景模糊的按钮

 <button className="preview_btn" href="#postpreview" onClick={this.preview}>Preview</button>

注意：我这样做是为了反应。

我尝试给一个单独的 div 和背景效果，但它所做的也是模糊了里面的内容。

Answer 1

在您的班级中设置状态：

 this.state = {
    blur: false; 
  }

创建一个在单击按钮时调用的函数。此函数更改状态并触发重新渲染

 preview() {
    this.setState = {
      blur:true;
    }
}

检查按钮组件中“模糊”的状态并相应地添加类

//Below code adds 'blur' class if the button is clicked
<button className={this.state.blur?'blur':''} onClick={this.preview}>Preview</button>  

代码笔