CODEWITHSUNDEEP
javascripthtmlcssreactjs
CraZyDroiD
CraZyDroiD

Reputation: 7105

update CSS class on button click - Reactjs

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.

Upvotes: 2

Views: 11502

Answers (6)

Joseph Nields
Joseph Nields

Reputation: 5661

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.

Upvotes: 1

Joshua Robinson
Joshua Robinson

Reputation: 3563

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

Upvotes: 4

sanket
sanket

Reputation: 664

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

Upvotes: 5

Thomas Freeborough
Thomas Freeborough

Reputation: 92

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

Upvotes: 0

Malcolm Vaz
Malcolm Vaz

Reputation: 131

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

Upvotes: 0

medo medo
medo medo

Reputation: 60

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

Upvotes: 0

Related Questions