React .getBoundingClientRect не работает

Question

Я пытаюсь использовать .getBoundingClientRect(), чтобы получить позицию текущего холста в React.Однако он продолжает возвращать DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}, но мой холст находится не в верхнем левом углу страницы.Есть идеи?

Обычно я просто пытаюсь понять, что пользователь нажимает на холст, а событие возвращает только абсолютную позицию относительно всей страницы, поэтому мне нужно положение холста (оно динамическое)вычесть это смещение.Есть ли способ, которым я могу обойтись без выполнения .getBoundingClientRect()?

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    const c = this.canvasRef.current;
    console.log(c);
    setInterval(console.log(c.getBoundingClientRect()), 1);
  }

  render() {
    return (
      <React.Fragment>
        <div
          className=""
          style={{
            width: "288px",
            height: "188px",
            position: "relative"
          }}
        >
          <canvas
            ref={this.canvasRef}
            style={{
              position: "absolute",
              width: "263px",
              height: "168px",
              top: "10px",
              left: "10px",
              backgroundColor: "#DCDEE0"
            }}
            onClick={e => {
              e.persist();
              console.log(e);
            }}
          ></canvas>
        </div>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

class Canvas extends React.Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    const c = this.canvasRef.current;
    console.log(c);
   setInterval(console.log(c.getBoundingClientRect()), 1);
  }

  onClick = e => {
    const { pageX, pageY } = e;

    console.log(pageX, pageY);
  };

  render() {
    return (
      <React.Fragment>
        <div
          className=""
          style={{
            width: "288px",
            height: "188px",
            position: "relative"
          }}
        >
          <canvas
            ref={this.canvasRef}
            style={{
              position: "absolute",
              width: "263px",
              height: "168px",
              top: "10px",
              left: "10px",
              backgroundColor: "#DCDEE0"
            }}
            onClick={this.onClick}
          />
        </div>
      </React.Fragment>
    );
  }
}