如何使用ref获取物料界面对话框的高度？
使用ref获取物料界面对话框的高度可以通过以下步骤实现：
- 首先，在对话框组件的定义中，使用React的
createRef()函数创建一个ref对象。例如：
import React, { createRef } from 'react';
class Dialog extends React.Component {
dialogRef = createRef();
// ...
}- 在对话框组件的渲染方法中，将ref对象绑定到对话框的根元素上。例如：
class Dialog extends React.Component {
// ...
render() {
return (
<div ref={this.dialogRef}>
{/* 对话框内容 */}
</div>
);
}
}- 在需要获取对话框高度的地方，可以通过访问ref对象的
current属性来获取对话框的DOM元素，并进一步获取其高度。例如：
class Dialog extends React.Component {
// ...
getHeight() {
const dialogElement = this.dialogRef.current;
const height = dialogElement.offsetHeight;
return height;
}
}这样，通过调用getHeight()方法，就可以获取到物料界面对话框的高度了。
对于物料界面对话框的应用场景，它通常用于展示弹出式的交互界面，例如提示框、确认框、表单填写等。通过获取对话框的高度，可以进行一些自定义的布局或样式调整。
腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以根据实际需求和场景来选择，可以参考腾讯云官方文档或咨询腾讯云的技术支持团队获取更详细的信息。
相关·内容
1回答
从物料用户界面中添加临时抽屉功能
、、、、
我使用的材料UI的迷你变体抽屉和它的工作良好，但在这个抽屉，当我打开导航栏，并点击任何地方以外的导航栏，它不是关闭。就像在临时抽屉里一样。我试图实施，但失败了。
迷你变体抽屉
临时抽屉
任何帮助都是徒劳无功。
浏览 3提问于2020-05-24得票数 0
下面是一个具有自定义宽度的Dialog的Material示例：
const customContentStyle = {
width: '100%',
maxWidth: 'none',
};
// some omitted code
<Dialog
title="Dialog With Custom Width"
actions={actions}
modal={true}
contentStyle={customContentStyle}
open={this.state.open}
>
Thi
浏览 0提问于2017-12-07得票数 48
回答已采纳
下面的代码创建一个具有静态维度的无模型对话框。setWidth和setHeight特性似乎没有为任何值做任何事情。
function formDialog1() {
var html = HtmlService.createHtmlOutputFromFile('Form HTML 1');
html.setWidth(20);
html.setHeight(20);
var userInterface = HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModelessDialo
浏览 0提问于2019-08-06得票数 0
回答已采纳
1回答
我想将动态计数器数据以角的形式发送到Mat对话框中，这样计数就会在Mat对话框上增加。但是，发送到Mat对话框的数据是静态的。如何动态更新Mat对话框上的数据？
浏览 1提问于2018-06-15得票数 0
回答已采纳
我有2个对话框，我将在第一个对话框中单击time..If时显示1个对话框。我会隐藏第一个对话框并显示第二个对话框，如果我在第一个dialog..and中单击下一步后移动对话框(在第二个对话框中) ...it返回到它的前一个位置(以显示第一个对话框)..so我已经决定获取当前窗口的位置并更新到另一个窗口位置，这样即使我单击下一步/上一步它也不会移动。我不知道如何获得窗口位置并更新到other..please help me，如果你们知道这一点的话。
浏览 1提问于2010-03-19得票数 0
回答已采纳
1回答
我在这里创建了一个演示，作为父容器在div中的单个页面中打开一个对话框。但全屏幕覆盖了整页。是否可以将对话框的宽度和高度设置为它的父容器？
.html文件
<mat-toolbar color="primary">
Angular Material 2 App
</mat-toolbar>
<div class="parent-container" fxLayout="row" fxLayoutAlign="center center" >
<button (click)=&#
浏览 0提问于2018-07-09得票数 0
我正在为我的React项目使用Material UI，并且我所处的情况是我想要获得一个对话框的高度。所以，我试着这样做： import Dialog from '@material-ui/core/Dialog';
class MyDialog extends React.Component {
constructor(props) {
super(props);
this.dialogRef = React.createRef();
}
render() {
if (this.dialogRef.curent) {
浏览 14提问于2019-03-16得票数 1
回答已采纳
1回答
创建可扩展UITableViewCell的最佳方法是什么？例如，我想创建一个自定义UITableViewCell (我已经知道如何创建)，但现在我不知道如何在图像周围创建自定义可伸展边框
例如，如下所示：
所以图像有不同大小的高度(宽度相同)
浏览 0提问于2013-01-15得票数 0
回答已采纳
1回答
物料-表不会添加行
、、、
对于JS来说，React是相当新的。尝试使用带添加行按钮的Material-table。添加行不会添加行。一个刷新的行被重置。我非常确定我在设置/更新状态时做了一些错误的事情。
export default function App() {
return (
<div className="App">
<Tabl
obj={{
a: "a",
items: [{ x: 1 }, { x: 2 }, { x: 3 }]
}}
/>
浏览 6提问于2020-11-13得票数 2
我有一个包含以下内容的对话框：
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop=&
浏览 1提问于2012-06-25得票数 1
回答已采纳
2回答
在物料界面单据中，对话框的实现是通过按钮的onClick实现的。但是，是否可以在组件的render方法中使用if-else条件显示该对话框？就像在登录表单中一样，如果凭据正确，则转到下一个组件，如果不正确，则在我从redux商店获得的道具上使用if-else条件弹出一个对话框。
提前感谢您的帮助。
浏览 14提问于2018-08-14得票数 1
我使用的材料-UI预租赁-你可以使用网格布局和实现断点。我已经使用了隐藏的组件和网格，现在我想使用对话框的withResponsiveFullScreen组件。问题是我不知道如何使用它，而官方版只是给出一点解释。
我可以使用Hidden来在两个不同的对话框之间进行更改，但我不希望以这种方式复制代码。那么有没有人知道怎么用呢？我只希望对话框在xs断点是fullScreen。
我正在使用一个扩展的React.Component类构造我的对话框，并在render()处返回一个带有我自己内容的资料-UI对话框。
浏览 1提问于2017-07-06得票数 3
回答已采纳
我需要从System.Win32名称空间(现代的'Vista‘对话框)定制OpenFileDialog。我找到了一些很好的关于如何使用System.Windows.Forms命名空间中的旧风格对话框来实现这一点的文章。设置NativeWindow并重载WndProc方法。当我使用Win32命名空间中的文件对话框执行此操作时，一切正常(意味着我会收到所有通知)，但在选定文件时会收到WM_NOTIFY消息。
我还使用EnumChildWindows(...)发现了文件对话框的任何子控件并注册了WndProc/WM_NOTIFY，但没有CDN_TYPECHANGE通知
从System.Win
浏览 8提问于2014-08-11得票数 0
2回答
这是一个简单愚蠢的问题，但我在网上找不到任何信息。我有一个带有自定义对话框的android应用程序。该对话框具有默认的灰色1px边框。但它也有一个围绕着灰线的黑色边框。
我想去掉黑色的那部分。
对话框是用xml编写的，我调用: dialog.setContentView(R.layout.xxxxx)；
一旦我这样做，黑色的边界就在那里。但是，xml没有设置背景色。此外，xml中的透明颜色也无济于事。
如果我不调用setcontentview。然后出现一个小对话框，但没有奇怪的边框。
浏览 3提问于2011-11-14得票数 0
回答已采纳
3回答
我在我的React应用程序中使用了Dialog，在单击按钮后，在几个表单元素上显示了一个Dialog。
我还设置了该对话框，允许使用拖动它。
当对话框显示时，它后面的任何表单元素都不会被ale访问。我直觉地意识到阻止与对话框背后的元素的交互是有意义的。
不过，我正在努力弄清楚如何显示对话框，但仍然能够编辑其背后的表单元素。
代码示例
是否有人知道是否可以显示MaterialUI对话框，并且仍然能够与对话框后面的表单元素交互(即当对话框被拖走时)？
浏览 3提问于2020-04-21得票数 7
回答已采纳
嘿，我在应用程序的主视图中有一个UIScrollView，我想知道在其中放置一组标签和按钮的最佳方式是什么。刚开始的时候，只有几个，所以我可以把它们实际放在界面构建器中，但现在我有更多的项目要添加到ScrollView中，不能在界面构建器的屏幕上全部容纳它们。有没有办法生成一系列的按钮和标签？我只需要它们在一个有组织的列表中，但我不知道如何在滚动视图中生成内容，而不是专门将它们放在IB中，然后给它们特定的位置。
浏览 1提问于2011-05-20得票数 0
我使用XmL创建了自定义警报对话框，其中
android:minWidth="25px"
android:minHeight="25px"
但是它看起来很笨拙，那么如何在xamarin android中根据设备的宽度和高度编程创建自定义警报对话框呢？
浏览 3提问于2017-09-01得票数 2
回答已采纳
通常，我将AppBarLayout的高度定义为xml布局中的固定dp。例如；
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height" />
当我了解更多关于指南的内容时，我逐渐了解到绝对比率定义了AppBarLayout的宽度和高
浏览 2提问于2016-12-09得票数 1
3回答
我使用的是jquery对话框。此对话框的内容是动态的，因此当对话框打开时，高度会发生变化。
$("#a_div").dialog({ width: 400 });
该对话框最初在页面中居中显示。但是当高度变化不再是中心时。
如何在不关闭并重新打开对话框的情况下刷新其位置？
谢谢
浏览 1提问于2011-03-28得票数 12
回答已采纳
我使用下面的代码来显示一个对话框：
private AlertDialog MyDialog;
public void adddialog() {
AlertDialog.Builder MyBuilder = new AlertDialog.Builder(this);
MyBuilder.setTitle("Title")
MyBuilder .setView(ListView);
MyDialog = MyBuilder.create();
}
ListView可能会取消固定行。
但我想知道MyDialog的高度。
我该怎么做才能得到它？
浏览 0提问于2013-05-02得票数 0
回答已采纳
2回答
正如你在下面的图片中看到的，这看起来像一个文件对话框和文件夹浏览器。此对话框只能选择文件夹(不能选择文件)。这是一个自定义控件吗？如果是这样，那么请给我如何制作它的建议。这是一个Winforms应用程序。
浏览 0提问于2011-12-25得票数 0
回答已采纳
4回答
我正在尝试创建一个内部带有UITableView的自定义对话框。我想要实现的是尽可能低的高度，这意味着它应该只包装表视图。
但是当tableview有太多的项目时(意味着它的高度大于屏幕)，我希望对话框从屏幕顶部和底部有20px的边距。
因此，如果表视图有2个项目，则对话框的高度应该是例如20px。但是如果tableview有200个项目，对话框的高度应该几乎占据整个屏幕的高度，并且其内容是可滚动的。
目前，如果表视图有多个项目，我只能看到一些项目，对话框的顶部和底部会消失。
谢谢。
编辑:我忘了提到，我打算只使用故事板来实现这一点，在内容拥抱和压缩中使用约束和改变优先级。
浏览 7提问于2019-11-14得票数 1
3回答
我遇到了一个问题，一开始我以为这是我的应用程序的一般配置，以及我给我的页面包装类的高度。但是，我做了一个简单的开箱即用的material选项卡示例，看起来这对于material组件来说是很自然的。
Material选项卡组件为其选项卡容器提供了相同的高度，该高度是其所有容器中最大的。因此，如果您有一个选项卡内容，其中包含大量内容，那么其他选项卡内容就会变得同样大，尽管它们可能只有一个文本字段和一个按钮。
如何使容器的高度调整到它自己的选项卡的内容？
这里有一个视觉
这就是为什么TAB 1这么大，TAB 2设置高度
让您看到代码正在工作，并处理它。
我到目前为止所做的一次攻击是设置一
浏览 7提问于2017-11-03得票数 9
回答已采纳
我正在创建一个应用程序，它在顶部有一排按钮，根据选择的按钮，另一行按钮出现在侧面。我计划这样做的方式是为每一行按钮创建一个单独的对话框，并在选择一个按钮时弹出一个新的对话框。到目前为止，我可以弹出新的对话框并隐藏主要的对话框，但很明显发生了一些事情。有没有人知道如何让它无缝地出现？
谢谢你的帮忙!玛丽
浏览 1提问于2011-02-24得票数 0
我想用web.xml和tomcat -users.xml在tomcat中保护我的管理页面。
下面是我的tomcat-users.xml的内容
<?xml version='1.0' encoding='utf-8'?>
<tomcat-users>
<role rolename="webadmin"/>
<user username="kumar" password="kumar" roles="manager"/>
</tomcat-
浏览 1提问于2013-09-11得票数 0
回答已采纳
我已经创建了一个小项目，其中我必须显示一个模式对话框，为此我使用了jquery-ui对话框。
我想以百分比为单位定义对话框的最大高度。我试过几种方法，但都不起作用。
有没有人能帮我解决这个问题。
请参阅
非常感谢
浏览 0提问于2013-04-02得票数 10
回答已采纳
我有一个包含iframe的组件，我想在react中访问它的内容，我使用ref来处理iframe，如何从iframe获取所有锚点标记 下面是我的代码： const GridGenerator = () => {
const [loading, setLoading] = useState(true);
const gridIframe = useRef(null);
function handleIframe() {
setLoading(false);
const iframeItem = gridIframe.current;
浏览 397提问于2020-06-23得票数 3
我在我的行中使用了操作(https://material-table.com/#/docs/features/actions)，但我希望单击该操作并打开一个对话框(https://material-ui.com/components/dialogs/)。 如何在actions中编写此代码？似乎Material-UI只是将下一个附加到了点击之后。可以在材料表中这样做吗？ 非常感谢!
浏览 8提问于2020-07-14得票数 0
有2个字符串输出。我们称它们为output1和output2。这两个文件应该保存在一个位置，每个文件应该具有相同的名称，但具有不同的文件扩展名(实际上都是文本文件)。在Python中如何做到这一点呢？该程序应该有标准的保存对话框，要求名称和位置。谢谢。
浏览 0提问于2011-05-06得票数 0
展示了如何在jQueryUI自动完成中添加滚动条。它的工作如广告所说的那样，但是，如果使用多个具有不同高度要求的自动完成小部件，则很难管理。在我的例子中，我有各种对话框(所有对话框都有一个关联的高度)，并且在对话框中有自动完成小部件。
在配置自动完成功能(即$( "#tags" ).autocomplete({source: availableTags, ...});)时，可以添加滚动条和相关高度吗？从父元素(即对话框)获取高度设置时，可以这样做吗？
浏览 2提问于2015-02-23得票数 1
1回答
我正在创建一个自定义对话框：
Dialog dialog = new Dialog(cont);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.dialog_error_layout);
...
我在这个对话框中为它的窗口设置了透明的背景
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(0));
如果我这样做，*dialog_error_layout*中包含的TextView不会显示全文。
它显示了大约
浏览 5提问于2014-01-30得票数 0
1回答
我正在使用材料UI卡。我在每张卡片的底部都有一个图标栏。卡中的介质超出图标栏，如下图所示： ? 下面是我把组件放在一起的代码： return (
<Card className={classes.card} >
<CardHeader
avatar={
<Avatar aria-label={authorAvatar} src={authorImg} className={classes.avatar}/>
}
action={
<Fieldset className=
浏览 5提问于2021-02-02得票数 1
回答已采纳
我有一个Jquery对话框。在对话框中，我有一个带有“保存按钮”的DIV。此DIV可以有多个按钮或下拉式菜单，具体取决于场景。因此，它实际上是一个顶级选项分区。
图片如下：
我需要让这个DIV始终可见。现在，如果对话框内容超过对话框高度，那么如果我向下滚动，我将失去options div的可见性。
有关于如何执行此操作的线索吗？
非常感谢。
浏览 0提问于2012-08-11得票数 1
2回答
当我显示我的对话框时，我的对话框的高度是100，宽度是100，就像
$("#dialog").dialog({
autoOpen: true,
height: 100,
width: 100,
modal: false,
draggable: false,
resizable: false,
});
并在后台加载数据，当数据完全加载时，因为jquery ajax有成功选项，从那里我们可以确定数据已加载，然后我会将这些数据显示在我的对话框中。假设我想在对话框中显示的数据需要更多的空间，比如高度应该是300，宽度应该是300。那么，当
浏览 0提问于2011-10-27得票数 7
回答已采纳
我正在使用一个windows服务，我希望在服务启动时打印一个.html页面。我正在使用这段代码，它打印得很好。但是出现了“打印”对话框，如何在没有“打印”对话框的情况下打印？
public void printdoc(string document)
{
Process printjob = new Process();
printjob.StartInfo.FileName = document;
printjob.StartInfo.UseShellExecute = true;
printjob.StartInfo.Verb = "print&#
浏览 0提问于2009-01-07得票数 16
1回答
将项动态添加到数组中
、、、
我在向数组中添加项时遇到了问题。我希望获得页面上<p>元素的高度，并将它们添加到数组中。但是，每次它获得一个带有一个元素的数组时，它看起来都是在重置前一个值。
const Paragraph = () => {
const [height, setHeight] = useState(0);
const [arrayWithHeight, setArrayWithHeight] = useState([]);
const ref = useRef(null);
useEffect(() => {
setHeight(ref.current.c
浏览 5提问于2022-02-22得票数 2
回答已采纳
3回答
在下面的对话框中，wrapperRefPopup的宽度是百分比-
<BootstrapDialog
style={{height:'auto', zIndex:500}}
aria-labelledby="customized-dialog-title"
open={true}
>
<IconButton
aria-label="close"
onClick={closeModal}
浏览 4提问于2022-06-10得票数 0
我正在关注Material Components Web 。作为页面的模板，我使用了快速入门中详细描述的非常基本的模板-我的理解是这个模板是一个“包含所有”的模板:它使用: node_modules/material-components-web/dist/material-components-web.css和， (完整代码如下)
似乎永久抽屉和永久抽屉没有按预期显示。不能滑动，不能向左偏，不能伸展高度。
请注意，临时抽屉确实按预期工作。
我遗漏了什么？
<!DOCTYPE html>
Material Components for the web
浏览 0提问于2017-05-22得票数 0
3回答
有没有办法让material对话框的高度和宽度根据里面的内容从一种大小过渡到另一种大小？
我已经尝试在内容中添加动画，内容有一个平滑的过渡，但模式仍然不能正确过渡。我想模式，以改变宽度/高度根据内容平滑。
我想要的:模式对话框的高度/宽度是平滑的，基于里面的内容。例如，当内容很大而我切换到较小的内容时，我希望对话框平滑地过渡到新的大小。
我使用updateSize()来更新对话框的大小，但是仍然没有转换。
浏览 2提问于2018-02-08得票数 2
2回答
我正在使用NetBeans 6.5和一个不断重复的Swing模式编写一个Java桌面应用程序。我的每个对话框都有一个Save Button和Close Button，它们在“保存”按钮后面有几乎不同的行为，在“关闭”按钮后面有相同的代码。
如何在不复制和粘贴的情况下重用此代码，同时保留对话框内面板的GUI生成器工具的用户？
浏览 0提问于2009-02-06得票数 1
回答已采纳
1回答
当显示自定义错误消息时，我希望停止材料表加载程序。这是我的材料桌组件。此外，我还需要知道如何创建自定义错误消息，就像烤面包机一样，条件是假的。这是我的尝试。如果有这样的事，请告诉我。因为我对材料桌完全是新手。
const tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forw
浏览 3提问于2021-01-27得票数 0
回答已采纳
1回答
我对Spring和web技术很陌生。
我有一个表，其中包含一个带有超链接的列。单击行的超链接时，需要在对话框中显示行数据和其他详细信息。我的控制器方法返回一个ModelAndView，其中包含我需要显示的数据和显示页面。
问题：
如何显示对话框？和
如何将数据传递给对话框？
Table.jsp
<script type="text/javascript">
function showDialog(ref, date) {
$ajax({
type: "POST",
浏览 3提问于2013-06-24得票数 4
回答已采纳
1回答
我尝试在Material UI中使用autosuggest。我在componentDidMount方法中设置了自己的数据。有没有一种正确或更好的方法来设置数据，而不是作为道具传入并在建议数组中进行设置？ 调用组件： <IntegrationAutosuggest placeHolder="Search the data " data={this.state.options} onSelect={this.handleSuggestionSelected}/> 我使用的是https://material-ui.com/demos/autocomplete/中的re
浏览 25提问于2019-03-10得票数 1
我正在绑定一个对话框，该对话框包含三个部分：TextBox、DataGrid和Button。我就像那样用DockLayoutPanel
<ui:style>
.panel {
width: 600px;
height: 500px;
}
</ui:style>
<g:HTMLPanel addStyleNames='{style.panel}'>
<g:DockLayoutPanel unit="PX">
<g:north size=&#
浏览 2提问于2015-04-02得票数 2
回答已采纳
是否有一种方法，使jQuery对话框打开在中心的可见窗口，如果它的高度未知？
我有一个对话框，它打开一个未知高度的动态加载形式。当第一次打开它时，它会向屏幕底部稍微偏移。当我关闭它并再次打开它，它似乎是正确的计算顶部偏移量。
我不能提前知道内容的高度，所以这对我来说是个问题。
编辑：这里是一个示例代码
我有两个页面-一个是实例化对话框的对话框容器，另一个是对话框内容。单击链接时，它的href将用作对话框的目标页面。
$(document).ready(function(){
$(a).click(function(){
$("#dialog").load
浏览 8提问于2011-03-29得票数 1
回答已采纳
1回答
我对对话框流和javascript很陌生，所以我不熟悉如何编写实现对话框流的代码--这是我的if语句，用于检查用户参数是否与火基中的值匹配，但它不起作用，并且触发了回退意图。这个场景是，如果答案= firebase值，bot回答它是正确的，添加分数并问下一个问题。
function q1correct(agent){
const q1snapshot = admin.database().ref('quizanswers/q1').once('value');
if(q1snapshot.val() == agent.parameters.p
浏览 4提问于2020-01-02得票数 2
回答已采纳
1回答
如何防止canvasRef.current在这里未定义？似乎来自material ui的模式组件导致了canvas引用的问题。我如何才能防止这种情况发生？我通过将canvasRef.current设置为节点值来尝试ref回调，但仍然没有成功。 const Child = (props) => {
const canvasRef = useRef();
const handleViewStuff = useCallback(() => {
apiCall(id)
.then((response) => {
浏览 21提问于2021-01-13得票数 0
我在任务窗格中有一个HTML页面，我需要显示一个'ok-cancel‘对话框和一个通知对话框：
如果我在日历事件中使用“displayDialogAsync”和“Iframe”来显示对话框：
Office.context.ui.displayDialogAsync(myUrl，{高度: 100，宽度: 200，displayInIframe: true }，dialogCallback)；
显示的对话框填充我的日历事件，忽略“高度”和“宽度”。为什么会这样呢？
如果我需要显示一个以任务窗格为中心的对话框，可以吗？如何知道任务窗格位置？我可以使用window.open(.
浏览 2提问于2020-08-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
