How I can use refs to change styling class in ReactJS?

javascript css reactjs css-modules refs
Muhammad Ateeq Azam picture Muhammad Ateeq Azam · Sep 20, 2016 · Viewed 42.3k times · Source

I'm trying to change background of a div when color value changes. Here is my function which receives color value:

ChangeColor(oColor) {
    this.props.ChangeColor(oColor);
    console.log("Refs: ", this.refs.colorPicker.className);
  },

Here is css class

.colorPicker {
    padding-right: 25px;
    background: #000;
    display: inline;
    margin-right: 5px;
  }

and here is my div element whose background needs to update on run-time.

<div ref='colorPicker' className={this.GetClass("colorPicker")}  />

I'm not sure about refs synatx so please help to fix this issue. Thanks.

Answer

Muhammad Ateeq Azam picture Muhammad Ateeq Azam · Sep 20, 2016

I found it. Here is answer:

  ChangeColor(oColor) {
    this.props.ChangeColor(oColor);
    this.refs.colorPicker.style.background = oColor; //this is how background will be updated

  },

Related questions

How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More
How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

How can you achieve either a hover event or active event in ReactJS when you do inline styling? I've found that the onMouseEnter, onMouseLeave approach is buggy, so hoping there is another way to do it. Specifically, if you mouse …

Read More