javascriptcssreactjscss-modulesrefs

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

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.

Solution

  • 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

  },