如何使用 Onclick 将 React 对话框移动到正文顶部答案

【问题标题】：How to move React dialog to top of the body using Onclick如何使用 Onclick 将 React 对话框移动到正文顶部
【发布时间】：2020-08-27 17:47:56
【问题描述】：

我有一个share-dialog，当用户点击它时我想移动它。在我的例子中，我有一个多个对话框，可以填充并希望它与与此对话框关联的id 一起移动。

我也在这里尝试了一些解决方案，但在处理过程中遇到了一些错误，任何帮助/建议我做错了什么。

//对话框

<div className="share-request-dialog"  onClick={this.onClick(participant.id)}>
    <div className="alert-dialog-container">
        <---- dialog body --->
    </div>
</div>

//到目前为止，style.top 和其他人都尝试过这个 onClick 函数

  onClick = (partId, e) => {
    
    var divClass = '.share-request-dialog'+partId;
    // eslint-disable-next-line no-restricted-globals
    let Y = scrollY;
    debugger
    // partId[0].style.top = e.clientY + 'px';
    divClass.offset().top = Y + 'px';
    console.log("Div is clicked" + partId);
}

/错误

TypeError: divClass.offset is not a function

//基本设计（屏幕可以相互打开多个，因此希望通过单击将每个屏幕移动到屏幕顶部）

【问题讨论】：

如果我理解正确，你想水平移动选定的 div 吗？
@SM1105922 是的.. 所以它基本上点击它应该移动到屏幕顶部。
如果你有基本的视觉设计，你能发布一下吗？
@SM1105922 已更新。如果您还有什么期待，请告诉我
您是否希望用户输入 div..一旦他/她单击并将文本放置在 div 的顶部

标签： javascript css reactjs dialog

【解决方案1】：

更新答案

我注意到您的代码是用 React 编写的，您需要考虑简单地将 CSS 类切换到具有绝对定位的左侧和顶部 0 的类。

或者您可以简单地将 div 样式设置为零，如下所示 - 非 React 代码

如果您希望对话框浮动在其他对话框之上 - 只需使用 z-index:<high value> 以确保它们是堆叠顺序的最顶部。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .share-request-dialog {
        background: blue;
        border: 1px solid red;
        height: 25px;
        top: 300px;
        position: absolute;
      }
    </style>
    <title>Static Template</title>
    <script>
      const getOffset = (partId) => {
        // eslint-disable-next-line no-restricted-globals
        // partId[0].style.top = e.clientY + 'px';
        event.target.style.top = 0 + "px";
        console.log("Div is clicked" + partId);
      };
    </script>
  </head>
  <body>
    <div class="share-request-dialog" onClick="javascript:getOffset(5)">
      <div class="alert-dialog-container">
        <---- dialog body ---> ss
      </div>
    </div>
  </body>
</html>

https://codesandbox.io/s/zen-agnesi-rybp4?file=/index.html

【讨论】：

用你的第二个试过了，它是 TypeError: Cannot read property 'offset' of undefined
TypeError 的第一个解决方案：无法读取 null 的属性“偏移量”
点击时是否滚动到顶部？这个codeandbox代码有什么我错过的吗？不为我而动。
再试一次，让我知道。请将其视为可以在 React 中对代码建模的伪代码
是的..它的工作..我一定会检查这个伪代码，一旦完成会将您的答案标记为已接受。非常感谢您的时间和精力。