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;
    }
}

检查＆＃39;模糊＆＃39;在您的按钮组件中并相应地添加类

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

Codepen

Answer 2

为什么不在另一个班级之间进行切换？

您需要做的就是将修改后的效果移动到另一个类中，例如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>
        )
    },
)}

Answer 3

风格

style属性接受具有camelCased属性而不是CSS字符串的JavaScript对象。这与DOM样式的JavaScript属性一致，效率更高，并且可以防止XSS安全漏洞。例如：

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


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

在DOM Elements - React

了解详情

Answer 4

我建议按照托马斯的说法做，或者你可以调用此功能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 5

让我们保持简短和甜蜜。假设您使用JSX并因此使用Babel，那么您可以使用ES6箭头功能。可以找到实时代码集示例here。

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 6

可以从javascript更改CSS规则，但我保证这不是您想要的路线。见Changing a CSS rule-set from Javascript

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

    document.getElementById(id).src = "";
    document.getElementById(id).load();

然后，您需要按钮，在点击时更新状态，以表明您的.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课程进行渲染。如何做到这在很大程度上取决于您的应用程序的设置方式。例如，如果您使用flux或redux应用程序与由简单生命周期组件构成的应用程序相比，这可能会有很大不同。

单击按钮更新CSS类 - Reactjs

6 个答案:

CSS

的JavaScript