时间戳

首页 > 解决方案 > 如何使用 Onclick 将 React 对话框移动到正文顶部

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

问题描述

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

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

//对话

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

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

  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

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

在此处输入图像描述

标签： javascriptcssreactjsdialog

解决方案

更新的答案

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

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

如果您希望对话框浮动在其他对话框之上 - 只需使用 az-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

推荐阅读