update CSS class on button click - Reactjs

Question

I'm trying to obtain a blur effect to my background when a user clicks a certain button. How can i update my css class when a user clicks the button.

This is the current css class i have

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

I want to make it like this make a user clicks the button

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

This is the button that should make my background blur

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

Note: I'm doing this in react.

I tried giving a separate div with the background effects but what it does is blurring the contents inside too.

sanket · Answer 1 · 2017-02-28T13:23:38.053

Set state in your class:

 this.state = {
    blur: false; 
  }

Create a function to be called when button is clicked. This function changes the state and triggers a re-render

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

Check the state of 'blur' in your button component and add classes accordingly

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

Codepen

score 3 · Answer 2 · answered Mar 01 '17 at 22:27

Let's keep this short and sweet. Assuming that if you are using JSX and consequently Babel then you can use ES6 arrow functions. Live codepen example can be found 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);

score 1 · Answer 3 · edited May 23 '17 at 12:25

It is possible to change CSS rules from javascript, but I guarantee this is not the route you would like to take. See Changing a CSS rule-set from Javascript

Instead I'd just use the following two css classes:

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

Then, you need your button to, on click, update the state to indicate that your post_options should render with the filter_blur class. How to do this will depend a lot on how your app is set up. For example, this will probably look much different if you are making a flux or redux app vs an app made of simple lifecycle components.

Thomas Freeborough · Answer 4 · 2017-02-28T12:01:31.127

Why don't you just make another class and toggle between classes?

All you need to do is move the modified effects into another class, lets say post_options_clicked and when the button is clicked in that method toggle a component state.

Lets say you have a simple component like this

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>
        )
    },
)}

score 0 · Answer 5 · answered Feb 28 '17 at 09:43

style

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. For example:

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


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

See more at DOM Elements - React

score 0 · Answer 6 · answered Feb 28 '17 at 09:50

I recommend doing as Thomas says or you could call this function 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)";
}

update CSS class on button click - Reactjs

6 Answers6

CSS

JavaScript