Javascript 在按钮单击时更新CSS类-Reactjs

当用户单击某个按钮时，我试图获得背景的模糊效果。当用户单击按钮时，如何更新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>

预览

注意：我在react中这样做

---

我试着用背景效果制作一个单独的div，但它也会使里面的内容变得模糊。

为什么不制作另一个类并在类之间切换呢

您所需要做的就是将修改后的效果移动到另一个类中，比如说

post\u options\u 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>
        )
    },
)}

const ExampleComponent=React.createClass({
getInitialState（）{
返回({
切换：false
});
},
切换状态（）{
if（this.state.toggled）{
this.setState（{toggled:false}）；
}否则{
this.setState（{toggled:true}）；
}
},
render（）{
返回(
{
这个。状态。切换
?
//你的密码在这里
:
//你的密码在这里
}
预览
)
},
)}

为什么不创建另一个类并在类之间切换

您所需要做的就是将修改后的效果移动到另一个类中，比如说

post\u options\u 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>
        )
    },
)}

const ExampleComponent=React.createClass({
getInitialState（）{
返回({
切换：false
});
},
切换状态（）{
if（this.state.toggled）{
this.setState（{toggled:false}）；
}否则{
this.setState（{toggled:true}）；
}
},
render（）{
返回(
{
这个。状态。切换
?
//你的密码在这里
:
//你的密码在这里
}
预览
)
},
)}

风格

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

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


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

const divStyle={
颜色：“蓝色”，
背景图片：'url（'+imgUrl+'），
};
函数HelloWorldComponent（）{
返回你好世界！；
}

---

有关更多信息，请参见

样式

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

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


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

const divStyle={
颜色：“蓝色”，
背景图片：'url（'+imgUrl+'），
};
函数HelloWorldComponent（）{
返回你好世界！；
}

---

更多信息请参见

我建议按照Thomas所说的做，或者您可以调用此函数onclick（）

---

我建议按照Thomas所说的做，或者您可以将此函数称为onclick（）

---

在类中设置状态：

 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>  

//如果单击按钮，下面的代码将添加“blur”类
预览

---

在类中设置状态：

 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>  

//如果单击按钮，下面的代码将添加“blur”类
预览

---

让我们保持简短和甜蜜。假设您使用的是JSX和Babel，那么就可以使用ES6箭头函数。可以找到Live codepen示例

CSS JavaScript

类节扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
模糊：错
};
};
render（）{
返回(

选项1
选项2

变得模糊不清
);
}
模糊=（）=>{
this.setState（{blur:！this.state.blur}）
};
}
React.render（，document.body）；

让我们保持简短和甜蜜。假设您使用的是JSX和Babel，那么就可以使用ES6箭头函数。可以找到Live codepen示例

CSS JavaScript

类节扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
模糊：错
};
};
render（）{
返回(

选项1
选项2

变得模糊不清
);
}
模糊=（）=>{
this.setState（{blur:！this.state.blur}）
};
}
React.render（，document.body）；

可以从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\u选项

应使用

filter\u blur

类进行渲染。如何做