更新CSS类，按钮单击 - reactjs

Question

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

这是当前的CSS类I

.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 ：我正在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

Answer 2

让我们保持简短而甜美。假设您使用JSX并因此可以使用Babel，则可以使用ES6箭头功能。可以在此处找到实时Codepen示例。

CSS

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

javascript

class Section extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       blur: false
    };
  };
  render() {
    return (
       <section>
        <ul className={this.state.blur ? 'blur' : ''}>
          <li className="post_options">Option 1</li>
          <li className="post_options">Option 2</li>
        </ul>
        <button onClick={this.blur}>Blur</button>
      </section>
    );
  }
  blur = () => {
    this.setState({blur: !this.state.blur})
  };
}
React.render(<Section />, document.body);

Answer 3

可以从JavaScript更改CSS规则，但我保证这不是您想要的路线。请参阅从JavaScript更改CSS规则集

相反，我只使用以下两个CSS类：

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

然后，您需要按钮才能在单击时更新状态，以指示您的post_options应使用filter_blur类呈现。如何执行此操作将在很大程度上取决于您的应用程序的设置。例如，如果您要制作磁通量或redux应用与由简单的生命周期组件制成的应用程序，这可能会大为不同。

Answer 4

样式

样式属性接受带有骆驼属性的JavaScript对象，而不是CSS字符串。这与DOM样式的JavaScript属性一致，更有效，并且可以防止XSS安全孔。例如：

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

请参阅DOM元素的更多信息 - react

Answer 5

我建议您按照托马斯说的那样做，或者您可以称呼此功能onclick（）

function post_options_click(){
 var x = document.getElementsByClassName("post-options");
 x[0].style.filter= "blur(5px)";
 x[0].style.-webkit-filter= "blur(5px)";
 x[0].style.-moz-filter= "blur(5px)";
 x[0].style.-o-filter= "blur(5px)";
 x[0].style.-ms-filter= "blur(5px)";
}

Answer 6

为什么不做其他类并在类之间切换？

您需要做的就是将修改后的效果移动到另一个类中，假设post_options_clicked，当该方法中单击该按钮时，请切换组件状态。

可以说，您有一个像这样的简单组件

const ExampleComponent = React.createClass({
    getInitialState() {
        return({
            toggled: false
        });
    },
    toggleState() {
        if(this.state.toggled){
            this.setState({ toggled:false });
        }else{
            this.setState({ toggled:true });
        }
    },
    render() {
        return(
            <div>
               {
                this.state.toggled
                ?
                <div className="post-options-clicked">
                  //Your Code goes here
                </div>
                :
                <div className="post-options">
                  //Your Code goes here
                </div>
               }
               <button 
                 className="preview_btn" 
                 href="#postpreview" 
                 onClick={this.toggleState}
               >
               Preview
               </button>
            </div>
        )
    },
)}