我如何使用 refs 来更改 ReactJS 中的样式类？

Question

当颜色值发生变化时，我正在尝试更改 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 所以请帮助解决这个问题。谢谢。

原文由 Muhammad Ateeq Azam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我找到了。这是答案：

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

  },

原文由 Muhammad Ateeq Azam 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果有人正在寻找钩子版本

 export const YourComponent = (props) => {
  const divRef: = useRef(null);

  yourTriggerEvent = () => {
    divRef.current.style.background = 'red';
  }

  return (
    <div ref={divRef}>
    </div>
  );
}

原文由 Jonathan Guerrero 发布，翻译遵循 CC BY-SA 4.0 许可协议