如何将div位置传递给子元素

Question

我试图将单击位置传递给div的子元素。在下面的示例中，我试图将my-div的顶部和左边的坐标传递给handleClick()函数：

<div id="my-div">
    <div onclick={() => this.handleClick(this.offsetX, this.offsetY)} />

offsetX/y是我的猜测，但这似乎行不通。是否有可能将父项的协调传递给子元素的函数？

Answer 1

你可以试着这样做：

函数来处理单击：

 handleClick = e => {
    var rect = e.target.parentElement.getBoundingClientRect();
    console.log(rect);
 };

元素来获取坐标：

  <div id="parent">
      <div id="child" onClick={e => this.handleClick(e)}>
        try this
      </div>
   </div>

rect将是一个对象，包含相对于文档的坐标和您单击的div的父级的维度。

然后你就可以随意使用了。