How I can use refs to change styling class in ReactJS?
If somebody is looking for the hooks version
export const YourComponent = (props) => {
const divRef: = useRef(null);
yourTriggerEvent = () => {
divRef.current.style.background = 'red';
}
return (
<div ref={divRef}>
</div>
);
}
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
},
Also, you can change the color of the div with the ref element. For example:
const myReference = this.colorPicker.current // The DOM element
myReference.style.backgroundColor = "red"; // The style you want to apply