React：在函数组件中使用 refs

Question

我是 React 的新手，我正在尝试弄清楚如何在我的函数组件中使用 Refs 来获取 div 的宽度。下面是一些证明我的困惑的代码：

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

export default function App() {
  const eyes = useRef();

  function onMouseMoveFn(e) {
    const x = eyes.current.offsetX();
    const y = eyes.current.offsetY();
    console.log(x, y, eyes);
  }

  return (
    <div onMouseMove={onMouseMoveFn}>
      <div class="eyes" ref={eyes}>
        <div class="eye" />
        <div class="eye" />
      </div>
    </div>
  );
}

可以找到演示 here

（在沙盒浏览器中将鼠标悬停在眼睛上时，理想情况下应该会导致控制台显示一组眼睛的 x 和 y 坐标，但它会给出错误）

在 React 的文档中，它说“但是，只要您引用 DOM 元素或 class 组件，您就可以在函数组件中使用 ref 属性”所以我不知道不明白为什么上面的代码不起作用。

Answer 1

您可以使用当前元素的getBoundingClientRect函数来访问偏移量，请参见以下代码：

eyes.current.getBoundingClientRect().x

React：在函数组件中使用 refs

React: using refs in a function component

javascript

ref

reactjs