Question

我正在开发一个具有两个可单击元素的React应用程序。为简单起见，我们假设它们是两个按钮，其中一个按钮的位置高于另一个按钮。

实际上，这些按钮中可能有30个全部位于垂直列表中，并且也可以滚动。

import { Button } from 'react-bootstrap';

<Button ref={(ref) => this.button1 = ref onClick={() => getHeight(this.button1)} }>Top</Button>
<Button ref={(ref) => this.button2 = ref onClick={() => getHeight(this.button2)}}>Bottom</Button>

我需要根据单击的两个按钮来计算一个按钮与另一个按钮之间的相对高度，并使用该高度动态地给div赋高度。

getHeight函数如下：

getHeight = (button) => {
    console.log(button.current.offsetTop);
    // In reality, it would store this y-value somewhere for this button
}

运行此命令时，每当我单击按钮时都会返回undefined。

在React中，如何访问元素引用的offsetTop属性？我关心的是绝对偏移量，而不仅仅是视口偏移量。这意味着当我向下滚动到屏幕外的按钮时，我得到的是页面顶部的真实偏移，而不仅仅是视觉上的偏移。

一些注意事项：

我使用的是React 15，而不是16，并且无法访问React.createRef函数。
因为这是一个React应用程序，所以如果人们可以建议不涉及JQuery的解决方案是最好的。

Answer 1

我认为您可以传递事件对象，然后具有target.offsetTop属性。像这样：

       <p-dialog #createDialog header="Create" [(visible)]="createDialog" [responsive]="true" showEffect="fade" [modal]="true" appendTo="body" [autoZIndex]="true" [baseZIndex]="1000">
          <CreateComponent (isCreated)="OnNewSubmitted($event)" *ngIf="createDialog" [user]="(authenticationService.currentUser|async)"></CreateComponent>
        </p-dialog>

Answer 2

为此，您并不需要参考。没有它也可以做到这一点。您可以创建一个按钮，然后使用以下代码对它们进行onClick，以计算按钮的绝对Y位置。

onClick={(e) => {this.getTop(e)}}

getTop = (e) => {
  const elem = e.target;
  const rect = elem.getBoundingClientRect();
  const scrollTop = document.documentElement.scrollTop;
  const absoluteY = scrollTop + rect.top;
}

我做了一个小提琴例子，向您解释了这个概念的作用。 https://jsfiddle.net/7520ebgf/23/

React 15-查找元素的offsetTop属性

2 个答案: