web-dev-qa-db-fra.com

Comment puis-je utiliser des références pour changer de classe de style dans ReactJS?

J'essaie de changer l'arrière-plan d'un div lorsque la valeur de la couleur change. Voici ma fonction qui reçoit la valeur de la couleur:

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

Voici la classe css

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

et voici mon élément div dont l'arrière-plan doit être mis à jour au moment de l'exécution.

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

Je ne suis pas sûr de refs synatx, veuillez donc aider à résoudre ce problème. Merci.

javascriptcssreactjscss-modulesrefs
11
Muhammad Ateeq Azam

Je l'ai trouvé. Voici la réponse:

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

  },
21
Muhammad Ateeq Azam

De plus, vous pouvez changer la couleur de la div avec l'élément ref. Par exemple:

const myReference = this.colorPicker.current // The DOM element
myReference.style.backgroundColor = "red"; // The style you want to apply
1
osvaldo carrillo