Как использовать useRef для изменения стиля элемента? - PullRequest
Новая
       21

Как использовать useRef для изменения стиля элемента?

0 голосов
/ 07 июля 2019

Я хочу использовать хук useRef, чтобы изменить стиль элемента DOM: 

const Box = props => {
  const box = useRef(0);

  const onClick = () => {
    box.current.backgroundColor = "blue";
  };

  return (
    <div>
      <div
        ref={box}
        style={{ width: "300px", height: "300px", backgroundColor: "red" }}
      />
      <button onClick={onClick}>Change color of box</button>
    </div>
  );
};

Однако, если я нажму на кнопку, backgroundColor из box неизменить.

Я также создал простой фрагмент кода , который иллюстрирует мою проблему.

1 Ответ

3 голосов
/ 07 июля 2019

Вы пытаетесь изменить несуществующее свойство backgroundColor непосредственно в вашем элементе DOM: 

box.current.backgroundColor = "blue";

Что бы (если бы оно работало) изменило ваш элемент DOM следующим образом: 

<div backgroundColor="blue" ... />

Чтобы заставить его работать, вам нужно изменить backgroundColor через свойство style: 

box.current.style.backgroundColor = "blue";

Рабочая версия вашего фрагмента

...