使用 useRef 获取活动背景颜色

Question

鉴于 css

.App {
  font-family: sans-serif;
  text-align: center;
}
.App:hover {
  background-color: red;
}

和 jsx 代码

import "./styles.css";
import { useRef } from "react";

export default function App() {
  const r = useRef();
  const handleClick = () => {
    console.log(r.current.style.backgroundColor);
  };
  return (
    <div className="App" ref={r} onClick={handleClick}>
      something
    </div>
  );
}

见codesandbox 我想获得 div 的活动背景颜色（红色）。但是代码什么也没给我。正确的做法是什么？

Answer 1

.style只告诉你元素上的内联样式，这个div没有内联样式。如果您想知道组合内联样式和 css 选择器时产生的样式，您需要 getComputedStyle

const handleClick = () => {
  console.log(window.getComputedStyle(r.current).backgroundColor);
}

Answer 2

el.style.X 工作不正常。而不是这个使用 window.getComputedStyle(el) and u can get full list of styles. As a example 你可以看到它。

使用 useRef 获取活动背景颜色

Getting active background color using useRef

html

css

jsx

reactjs