javascript - 单击按钮更新 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>

Note: I'm doing this in react.

我试着给一个单独的 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>  

Codepen