web-dev-qa-db-ja.com

refを使用してReactJSのスタイリングクラスを変更するにはどうすればよいですか？

色の値が変わったときにdivの背景を変更しようとしています。色の値を受け取る関数は次のとおりです。

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

ここにCSSクラスがあります

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

実行時に背景を更新する必要がある私のdiv要素を次に示します。

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

Refs synatxについてはわかりませんので、この問題の修正にご協力ください。ありがとう。

javascriptcssreactjscss-modulesrefs
11
Muhammad Ateeq Azam

見つけた。ここに答えがあります：

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

  },
21
Muhammad Ateeq Azam

また、ref要素を使用してdivの色を変更できます。例えば：

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