如何解决如何使用Onclick将React对话框移至主体顶部
我有一个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 = (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);
}
都已尝试使用此onClick函数
TypeError: divClass.offset is not a function
/错误
dict//基本设计（屏幕可以相互打开，因此希望将每个按钮都移到屏幕顶部）
解决方法
更新的答案
我注意到您的代码是用React编写的，您需要研究一下将CSS类切换到一个绝对位于左侧和顶部0的类。
或者您可以简单地将div样式的顶部设置为零，如下所示-Non 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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。