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

【问题标题】：How to pass a div position to a child element如何将 div 位置传递给子元素
【发布时间】：2018-12-21 09:10:02
【问题描述】：

我正在尝试将点击位置传递给 div 的子元素。在以下示例中，我尝试将 my-div 的顶部和左侧坐标传递给 handleClick() 函数：

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

offsetX/y 是我的猜测，但这似乎不起作用。是否可以获取父项项的坐标并将它们传递给子元素的函数？

【问题讨论】：

这听起来很反模式，因为控制流应该保持单向（自上而下）。您的子元素可以根据父元素的状态更改其道具。
你确定这是 React 吗？
是的，它是 React（尽管我怀疑这对问题没有影响）。我明白为什么你会说这是一种反模式，但父 div 可能在屏幕的一半处，所以我需要知道用户从 div 的开头点击了多少像素。 clientX 和 pageX 只给我相对于整个页面的 x 值。

【解决方案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 的父级的尺寸。

那么你就可以随心所欲地使用它们了。

【讨论】：