3

我正在研究一个反应表。我有一个列，其中数据单元格有一个扩展器图标。如果我们单击扩展器，则会打开/显示弹出页面/工具提示。

现在我有两个问题 - 1.如何显示弹出页面/工具提示相对于单击扩展器的数据单元格。例如，年龄有 1000 行。有分页和页面大小。因此，假设单击第 4 行时弹出框/工具提示的位置与单击第 7 行时弹出框/工具提示的位置不同。你看到的黄色小东西是我的弹出页面/工具提示

弹出窗口 1

在我的代码中，无论我单击该特定列的哪个行单元格，弹出窗口都固定在同一位置。

我想知道如何显示与单击扩展器的数据单元格相关的弹出页面。基本上改变顶部和左侧就可以了。但是我该如何实施。基于什么我应该给顶部和左侧？

第二个问题是 - 2.如果我在弹出页面之外单击，如何关闭弹出页面？

我的完整代码示例在这里 - Demo/Fiddle

这是我的弹出页面 CSS

.filter-child {
  width: 30%;
  position: absolute;
  z-index: 10;
  background: #ffffe0;
  padding: 15px;
  border: solid 1px #e9eff4;
  top: 32%;
  left: 45%;
}

实现这一目标的最佳方法是什么 - 来自父级的 CSS/Plain JS/React Props？如果我使用 React Props，我应该为这种相对样式发送什么作为道具。

这可以通过 CSS/Vanilla JS 实现吗？

如果您可以在这方面帮助我，请更新我的Demo/Fiddle并向我展示如何实现所需的功能。

父页面/表格似乎是父页面，但根据我的理解，这里的数据单元格/行单元格（在其上单击）充当真正的父级。

子弹出框/工具提示将不在单击的单元格的位置。我想将此子弹出框/工具提示定位在单击的单元格位置的下方。

Stack 上的某个人可以更新/分叉我的Demo/Fiddle并向我展示如何实现所需的功能吗？

4

2 回答 2

1

我认为解决方案也可能是您在单击时检查 X 和 Y 位置并将其存储在某个状态。

 style: {
    left: 0,
    top: 0,
  },

之后，您只需将坐标作为样式发送。这样您就可以正确显示弹出窗口

 <div style={this.state.style}>
于 2019-03-21T11:41:33.423 回答
0

弹出窗口<Child>必须是父元素的 HTML 子元素，才能继承其位置。所以将子组件移动到父组件的模板中，并根据状态有条件地渲染它。

于 2019-01-02T20:16:55.360 回答