从子组件关闭物料UI对话框触发打开父组件的对话框
，可以通过以下步骤实现：
- 在子组件中，当关闭物料UI对话框的动作发生时，可以通过事件或回调函数的方式通知父组件。这可以通过自定义事件或props属性来实现。
- 在父组件中，接收到子组件的通知后，可以在相应的事件或回调函数中触发打开父组件的对话框的动作。
- 打开父组件的对话框可以通过设置一个状态变量来控制对话框的显示与隐藏。可以使用Vue.js、React等前端框架来管理组件状态。
- 在打开父组件的对话框时，可以根据具体需求选择合适的UI组件库来实现对话框的样式和功能。腾讯云的云开发平台提供了一些适用于前端开发的组件库，如腾讯云开发者工具套件（https://cloud.tencent.com/product/tcb）中的云开发 UI 组件库。
总结起来，实现从子组件关闭物料UI对话框触发打开父组件的对话框，需要在子组件中通过事件或回调函数通知父组件，父组件接收到通知后触发打开对话框的动作，并通过合适的UI组件库来实现对话框的样式和功能。
相关·内容
我在React Material UI中使用useState inside对话框。 我使用useCallBack函数，如下所示。 const [count,setCount] = React.useState({
count: 0
})
const countCallback = useCallback(
() =>
setCount({
...count,
count : count.count + 1
}),[setCount,count]) 在ChildComponent中点击递增按钮执行此回调时，显示递增的数字。 但当我关闭对话框并
浏览 26提问于2020-01-01得票数 0
回答已采纳
我在Material中有一个对话框，在从web服务获取数据时打开一个嵌套的进度对话框。嵌套对话框不是我喜欢的模式，但客户端喜欢。
如果获取成功，我想关闭进度对话框和父对话框。如果提取失败，则关闭进度对话框，但保持父对话框打开。
我正在使用Redux，所以当API请求成功完成时，设置标志来关闭这两个标记。这些标志最终通过道具传递给对话框。
但是，似乎父对话框是在嵌套之前呈现的，因此它首先消失，然后是进度对话框。有点丑。
我怎么能在父母之前解雇孩子--或者和父母同时。这两种方法都是可行的
浏览 5提问于2017-10-07得票数 0
1回答
我创建了一个JSP页面，它使用jQuery打开一个对话框。
JSP (div)：
<div id="dialog" title="Welcome To Chat" class="ui-helper-hidden tabdialog">
<iframe id="inlineframe" name="inlineframe" src="" frameborder="0" scrolling="auto" width="600" heigh
浏览 0提问于2014-03-22得票数 1
回答已采纳
4回答
我已经在另一个组件中创建了作为组件的对话框。对话框打开时没有问题，但关闭并尝试重新打开它时，id是不可见的。
父组件
import { Component,OnInit } from '@angular/core';
import { PostComponent } from './post/post.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.co
浏览 2提问于2017-07-08得票数 5
回答已采纳
我有两个对话框，一个在外部作用域(父级)，另一个作为子级。
export default function App() {
const [parentDialogOpen, setParentDialogOpen] = useState(false);
const [childDialogOpen, setChildDialogOpen] = useState(false);
const handleParentClick = () => {
setParentDialogOpen(true);
};
const handleChildClick = (e
浏览 21提问于2021-05-28得票数 0
回答已采纳
1回答
我们在Outlook外接程序中使用一个对话框进行身份验证。在我们的插件中，我们的逻辑是首先检查对话框API支持，然后检查插件是否有框架-在这种情况下，它会弹出一个新的窗口进行身份验证。最近，OWA的对话API亮起了，这给我们带来了一些问题。
我们修复了之前与执行身份验证的顺序(我们使用ADAL.js)和初始化Office相关的一些问题。然而，一旦我们通过了这些，对话框似乎不能使用Office.context.ui.messageParent与插件进行通信。
此外，即使外接程序订阅Microsoft.Office.WebExtension.EventType.DialogEventReceive
浏览 10提问于2017-02-10得票数 1
回答已采纳
我想打印到控制台'hello‘上的自动完成面板是打开的。怎么做？
这就是我尝试过的template.html
<mat-form-field>
<input class="selectCustomer" opened id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-aut
浏览 2提问于2019-12-10得票数 1
回答已采纳
我使用react + material-ui。我在jsx文件中创建了如下dialog组件：
export default class CartoviewAbout extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
}
_handleOpen() {
this.setState({open: true});
};
浏览 1提问于2017-01-04得票数 4
我看过Reuse Quasar Dialog plugin with custom component on another component，它没有任何答案，我有接近相同的问题，但我有一些不同的结构代码。在我的父母表单上，我有 <q-dialog prevent-close v-model="showProfileForm" class="profileDialog">
<profile-dialog></profile-dialog>
</q-dialog>
浏览 46提问于2020-01-07得票数 1
回答已采纳
我是通过将父状态作为支持传递给子组件来打开子组件模型的。是否有任何方法可以在不受父组件干扰的情况下关闭子组件本身的模式。
class Parent extends Component {
constructor(props) {
super(props);
this.showModal = this.showModal.bind(this);
this.state = {
showModal: false
};
}
showModal() {
this.setState({ showModal
浏览 0提问于2019-05-13得票数 7
回答已采纳
我在我的行中使用了操作(https://material-table.com/#/docs/features/actions)，但我希望单击该操作并打开一个对话框(https://material-ui.com/components/dialogs/)。 如何在actions中编写此代码？似乎Material-UI只是将下一个附加到了点击之后。可以在材料表中这样做吗？ 非常感谢!
浏览 8提问于2020-07-14得票数 0
我已经使用vuetify创建了一个对话框，我希望它能够预先填充v-select中的数据，但是当我打开对话框模式时它是空的。我已经将propPackage分配给了selectPackage，它在v-select中的v-model中使用。打开对话框时，应该如何预填充它？
对话框
<template>
<v-row justify="center">
<v-dialog v-model="dialog" max-width="600px" @click:outside="close">
浏览 2提问于2021-11-23得票数 1
回答已采纳
我使用了一个material -ui对话框。由于我能力不足，对话框不能重复打开和关闭。关闭对话框后，无法再次打开登录程序。我应该如何修复我的代码？我正在使用React和Redux。函数OpenPepsi在容器中。can是从Promise对象中获取的。 function MainPage(props: Material) {
return (
<React.Fragment>
<Link variant="h3" onClick={props.OpenPepsi}>
OpenPepsiDialog
浏览 21提问于2019-12-27得票数 1
2回答
我对PrimeNg中的动态对话框有问题。
除了close之外，还有其他选项可以处理对话框上的其他操作吗？
例如，在Kendo-UI对话框示例中，我可以定义组件的content.instance，并且可以访问作为对话框打开的组件实例的字段。
const ref = this.dialogService.open(ResourceComponent, {
data: {
logicFormGroup: this.formGroup,
resources: this.resources$
}, width: '
浏览 5提问于2020-05-09得票数 4
回答已采纳
，我正在玩一个新的娱乐项目。我已经使用v-对话框实现了登录和注册，我正在调用来自多个组件的那些v-对话框。基本上，它对我有效，但当我点击一个按钮弹出下一个v-对话框时，我希望关闭前面的对话框。
目前的工作：
1)在肚脐上放置一个标志按钮。当单击该按钮时，v-对话框中的标志将弹出。
登录页面上的还有另一个按钮，它将打开一个v-对话框，用户可以在其中选择帐户类型。在选择按钮时，另一个v-对话框将以登录页的形式打开.
我需要的解决方案：
当新对话框弹出时，我可以关闭前一个对话框的方法或逻辑。
希望能有一些好的想法
浏览 4提问于2020-10-15得票数 0
1回答
我有一个material ui对话框，让用户确认一个操作。问题是警报隐藏在对话框的后面。有没有一种方法可以给警报一个更高的z索引或其他东西来避免这种情况，这样警报就会占据前台？ import Dialog from "@material-ui/core/Dialog";
import { confirmAlert } from "react-confirm-alert";
<Dialog><Button onClick={clickEvent}</Button></Dialog>
function clickEve
浏览 34提问于2021-01-20得票数 0
4回答
我目前正在使用以下命令打开对话框组件
亲本
<v-btn color="#EF5350" dark small absolute top right fab
@click="showDialog">
<v-icon>zoom_in</v-icon>
</v-btn>
<UIDialog :dialog="dialog" @updateDialog="dialog = $event" />
<script>
import UIDialo
浏览 0提问于2019-06-17得票数 5
回答已采纳
我正在寻找一种在组件上调用函数的方法。这是我的设置，我有一个可重用的组件，它是我在网格中显示的所有数据的基础，包括过滤器逻辑，过滤器芯片，导出和实际网格。到目前为止，所有这些都运行得很好。现在我有了一些例子，用户可以点击一行并编辑一些数据，这些数据通过角度材料显示在对话框窗口中。所有的工作都很好，但我要做的是在用户进行更改或添加数据后重新加载网格。我的基础组件有一个名为onGridRelaod的函数
onGridReload($event: IGridReloadPayload) {
this.setDataFetcherFactory($event.currentDataF
浏览 0提问于2019-11-21得票数 0
1回答
我在上工作的项目遇到了问题。
当我单击右键并将其关闭时，每次我再次键入时，Modal都会自动打开。似乎在关闭后，警报状态介于true或false之间，但props会将true保留为值。
父级
import "./page-home.css";
import logo from "./download.svg";
import ReactDom from "react-dom";
import Modal from "./components/modal.js";
class PageHome extends React.Comp
浏览 0提问于2020-08-05得票数 0
2回答
我对组件进行了拆分，只是因为基组件或父组件代码的大小和代码组织的原因。因此，根据父组件的各节拆分组件。
因此，每个子组件都是同一个父组件的每个部分。但我的问题是如何从父组件访问子组件对象？因为我看到的大多数示例都是基于来自父组件的单击事件来查看子组件(类似对话框)，并且值被传递回父html单击事件，并使用发射器和输出参数捕获值。
而在我的示例中，没有这样的单击操作来触发子组件。那么如何将子组件的值传递给父组件。
浏览 1提问于2018-04-23得票数 0
对于DetailsLists，"onActiveItemChanged“不能很好地打开该项目的模式对话框，因为在同一行上的第二次单击(在关闭模型对话框之后)会被忽略，因为activeItem没有改变。"onItemInvoke“也不是很好，因为它只对双击做出反应。
有没有办法清除激活的项目？
浏览 10提问于2017-07-25得票数 1
回答已采纳
我试图在一个子组件上打开一个vue材质对话框。我希望触发器按钮保留在父组件上，并在子组件上保留对话框模板，以便更容易维护。
对话框正确打开，但当我单击“关闭”按钮时，对话框将关闭，但无法使用“触发器”按钮再次打开该对话框。我使用一个道具将变量从父变量传递给子变量。
如何关闭对话框并再次打开它？
app.vue:
<template>
<div>
<button @click="showContextMenu = true">
<span>Show Context Menu</span>
浏览 8提问于2020-05-05得票数 0
回答已采纳
1回答
我用角质材料打开对话框。我有很多组件在对话框中得到了开放，但作为一个良好的分离关注的问题，我想避免烘焙在对话行为的组合。我有一个包装组件调用仪表板对话框，它有一个ng内容区域，并提供了一些基本功能和样式。
我希望能够做这样的事情，我可以做的tsx/反应；
const dialogComp = `<app-dashboard-dialog><app-create-user-form (create)="handleCreate()" cancel="handleCancel()"></app-create-user-form>&
浏览 1提问于2020-05-13得票数 1
我有一个组件是一个对话框(用户创建表单)。
this.dialog.open(AddUserComponent, { restoreFocus: true });
该组件通过模板引用打开另一个对话框(以避免为简单段落创建大量组件.)
<mat-dialog-content>
<!-- user creation form -->
</mat-dialog-content>
</mat-dialog-actions>
<button (click)="submit()">
create
</
浏览 7提问于2022-08-17得票数 1
回答已采纳
1回答
我的页面有两个jquery对话框。如果两者在不同的时间开放，那就没有问题了。只有当两个对话框同时打开时，问题才会出现。在我的例子中，第一个对话框由用户操作打开，第二个对话框由系统打开(这个对话框将在会话超时发生时触发)。现在先由用户打开，然后立即打开第二个对话框，现在我需要限制用户单击对话框1上的任何内容。基本上，我们应该限制用户执行任何操作对话框。
我试着调整大小:假的，拖的:假的，但这些没有帮助。有没有办法解决这个问题。
对话1
$('.status-dialog').dialog({
autoOpen: false,
wid
浏览 1提问于2018-02-06得票数 0
回答已采纳
我正在使用Qt来构建一个UI，我需要在主应用程序窗口之前显示一个对话框窗口，这样用户就可以选择一些文件来加载ans之类的东西。我得到的是一个相当简单的main：
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
IView *view = new QtView();
view->showView();
int rc = a.exec();
std::cout << "exit" << std::endl;
return rc;
浏览 3提问于2010-12-01得票数 2
回答已采纳
2回答
是否有方法可以停止jQuery UI对话框的关闭事件？
我有一个带有窗体的对话框模式。当用户关闭对话框时，我希望提示“是否继续而不保存更改？”是。单击Yes按钮继续，并按预期关闭对话框。No按钮将停止关闭事件并保持对话框打开。
这个是可能的吗？
浏览 0提问于2011-07-18得票数 18
回答已采纳
我正在使用SharePoint 2010，我已经设法在一个模态对话框中打开了一个列表。当您单击一个按钮时，我正在尝试在相同的模式对话框中打开另一个列表。(理想情况下，关闭第一个对话框然后打开另一个对话框)下面是我的模态对话框声明：
function OpenDialog(url)
{
var dialogOptions = SP.UI.$create_DialogOptions();
dialogOptions.url = url // URL of the Page
dialogOptions.title = 'Dialog Window&
浏览 2提问于2016-10-27得票数 1
因此，我有一个更高级别的导航组件，如下所示：
<Navigation ref="nav">
<Children>
<Footer>
在我的一个子组件中，我想在导航组件中调用一个方法。我该怎么做呢？我试了一下：
如果导航有一个名为
toggle() {
this.setState({open: true})
}
我可以在子组件中这样调用它吗？
孩子们：
openSomething = () => {
console.log(this.refs);
this.refs.nav.toggle();
}
<Somebu
浏览 0提问于2015-12-27得票数 1
1回答
我正在构建一个应用程序，它使用了一些React Hooks和一些类组件--这不是一个很好的方法，但我的时间很紧迫。如何使用React Hooks将数据从子功能组件传递到有状态类组件？ 我要传递的值是表行的索引吗？ 子组件： import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from
浏览 14提问于2019-10-12得票数 0
1回答
我有一个定制的vue指令。
Vue.directive('click-outside', {
bind: function (el, binding, vnode) {
document.addEventListener(clickHandler, (event) => {
const clickedInsideDropdown = el.contains(event.target);
if (!clickedInsideDropdown && el.classList.contains(openClass)) {
浏览 2提问于2017-11-11得票数 1
回答已采纳
我在我的应用程序中使用，我有两个组件。
父Html：
<div id="list">
<ul><li class"list li><a id="modal1" (click) = "openmodal($event)"></a>
....
....
</div>
父组件：
import { Component, OnInit } from '@angular/core';
import { ChildModalComponent } from '
浏览 1提问于2018-12-31得票数 0
1回答
我有一个角度PWA，这应该可以让用户上传图像到亚马逊网络服务S3桶。它可以在任何浏览器的Windows和Android上运行，但在IOS上使用“图片库”时，无论是在Firefox和Chrome中还是在Safari中都不能使用。 选项“拍摄照片或视频”实际上没有问题，但当使用“图片库”选项时，它让我选择一个图像，但选择后没有任何反应。移动Chrome控制台的调试表明processFile($event)函数甚至没有被调用，但我找不到原因。 由于设计上的选择，输入的样式是"display: none“，我使用另一个按钮来打开它，但是因为它可以让我上传一张新的照片，让我实际选择图像，我不会
浏览 18提问于2021-09-22得票数 0
如果用户单击第一个组件中的按钮，我希望打开对话框(另一个组件)。
我的组件是作为函数编写的。
第一个组件：
function Bookings(props) {
const [dialog, setDialog] = useState(false);
function openUserDialog() {
console.log("called")
setDialog(true)
}
return (
<div>
<
浏览 0提问于2019-03-04得票数 0
如何在javascript中关闭所有jquery ui对话框窗口？
情况：
该页有多个可以使用对话框打开的内容。我需要一个方法来关闭所有以前的窗口，然后再打开一个新的窗口。
浏览 0提问于2010-10-08得票数 40
回答已采纳
7回答
我对垫子对话关闭的用法有点困惑.
所以，我有一个带有表单的对话框。如果用户单击submit按钮，表单将被验证。如果输入有效，则关闭对话框并提交表单。但是，如果输入无效，则对话框将保持打开状态，并显示错误消息。为此，我想使用mat对话框-关闭，因为它在中被描述为如下所示：
<button mat-button [mat-dialog-close]="true">Yes</button>
我认为我可以传递给它一个布尔值，标签是否是活动的取决于变量的布尔值。然而，这是行不通的。我试过这样做：
<button type="submit" (
浏览 0提问于2017-12-01得票数 26
回答已采纳
2回答
我有一个项目，其中弹出了一个设置对话框(父级)。当用户点击继续时，会打开一个主对话框(子)。在主对话框中，用户可以重新编辑设置对话框(父级)。当用户单击X关闭设置对话框时，应用程序将终止。我假设这是因为我们关闭了父级，它会处理掉所有的子级。
是否可以在不关闭主对话框(子对话框)的情况下关闭父对话框(或隐藏它)？如果不是，下面的修复会起作用吗？作为父项打开主对话框并使其打开设置对话框(子项)
浏览 1提问于2012-09-08得票数 4
1回答
不知道有没有人能帮我。当状态更新以重新呈现react文件中的所有状态时，我遇到了这个奇怪的问题： 下面是我不想在做其他事情时更新的主状态： {dashboard.layout.map((layout, i) => createContent(layout, i))} 但是，当使用Material UI对话框时，我单击一个按钮将其打开，该按钮会按如下方式更新状态： onClick={handleDashletSelectorOpen}
const handleDashletSelectorOpen = () => {
setDashletSelectorOpen(true)
浏览 8提问于2020-10-27得票数 0
1回答
我有一个按钮，它有一个工具提示(用于悬停描述目的)，当点击时，显示一个模式对话框。我的问题是，关闭模式后，工具提示就会显示出来。
如果单击该按钮，如何取消工具提示？
编辑:实际发生的情况是，在模式关闭后，触发打开的按钮再次被聚焦，然后触发工具提示打开。也许有一种方法，在关闭模式、对话框等时，不聚焦触发打开事件的元素。
按钮
<q-btn @click="showTagManagementModel = true">
<q-tooltip :delay="500">Edit display mode</q-tooltip&g
浏览 0提问于2018-06-26得票数 0
我已经为包含地址字段、输入框和SelectItems的示例创建了FC say子组件，当从另一个组件父级调用此FC时，我需要访问输入框的值并选择用户添加的项。
您能给我一个简单的例子，比如父组件通过函数组件样式TypeScript调用时子组件中的1文本框。
下面是具有两个输入和一个SelectItem的子组件的示例代码
return (
<>
<Accordion varient={'grouped'} expanded theme={theme}
items={[
{
浏览 5提问于2022-08-31得票数 0
我试图在这个答案中使用一个特殊的PrimeFaces数据导出实现：
然而，我们的用例要复杂一些，例如，使用Facelets来显示各自的数据表以进行导出，其中包含有子表的行扩展。
insiderListManagerDialogs.xhtml:
<ui:include src="insiderListManagerListDialog.xhtml">
<ui:param name="idPrefix" value="il-emp" />
<ui:param name="widgetVarPre
浏览 0提问于2015-05-27得票数 1
回答已采纳
Sharepoint promoted links webpart在对话框中打开，使用SP.UI.ModalDialog.ShowPopupDialog(url)打开弹出窗口。我正在使用SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK)关闭pop。但是我想要将父窗口重定向到一个url，该url是从模式弹出窗口发送的。但是提升的链接不会在dialogReturnValueCallback中发送对象返回值。有没有办法让我们仍然可以将父页面重定向到url？
浏览 1提问于2015-10-09得票数 0
1回答
如何跳过物料步进步进
、、、
我有一个实质性的对话，在那个对话中我有一个步骤。我有四步..。其中每个步骤都包含一个表单。
当我提交第一步时，我正在保存表单，然后转到下一步。
这里，如果我关闭我的对话框，如果我再次尝试打开它。我要我的步进从step2开始。我不想回到步骤1，因为它已经提交，并且step1应该处于已完成的状态。
在这里，我尝试过不同的场景，大多数时候我在step2中没有得到形式。
请大家分享实现这一目标的任何方案或解决方案。
浏览 3提问于2022-03-02得票数 0
我是JSF和primefaces的新手。我正在使用Primefaces对话框框架弹出服务协议的模态条款。我遇到的问题是，当对话框关闭时，我的dialogReturn事件处理程序不会被调用，尽管对话框本身也关闭了，但模式覆盖仍然保留在页面上。模式覆盖可能是在转移注意力，因为当对话框也不是模式时，dialogReturn方法也不会被调用。
以下是相关代码片段：
用于创建对话框的窗体：
<h:form prependId="false">
<ul>
<ui:repeat value="#{serviceEditor.service.sub
浏览 2提问于2014-11-15得票数 0
我在我的项目中使用了一个Vuetify.js，当我使用v-对话框组件时，我遇到了一个问题，就是关闭v-对话框并再次打开。
这是我的密码。
<div @click="dialog=true">click here</div>
<v-dialog v-model="dialog">
<alert-popup />
</v-dialog>
data() {
return {
dialog : false
}
这是我第一次打开对话框时的工作，但当我再次打开时，只能看到不透明的黑色页面，我不知道
浏览 1提问于2020-07-29得票数 4
我在模态对话框中显示表数据，当我单击表行来编辑数据时，它将打开另一个模态对话框，在这里，我使用componentWillMount()中单击的行id获取行数据。但是，当我关闭编辑模式对话框并尝试编辑其他表行时，componentWillMount()将不会调用。所以编辑模式对话框是空的。为什么componentWillMount不每次都打电话？
浏览 2提问于2017-11-14得票数 1
1回答
Vaadin获取焦点元素
、、、
我对专注于瓦丁有点问题。当我打开新窗口(对话框)时出现问题，例如单击按钮：
new Window(caption, component);
当窗口关闭时，方法close()被执行。它在Window类中实现：
public void close() {
UI uI = getUI();
// Don't do anything if not attached to a UI
if (uI != null) {
// focus is restored to the parent window
uI.focus();
浏览 6提问于2017-08-22得票数 0
我正在使用jquery-ui对话框(非模式对话框)。如果用户在对话框之外单击，我想关闭对话框。出于这个原因，我使用。我还创建了一个小提琴：
在这个小提琴中，我创建了一个按钮，通过它我们可以打开一个对话框。我还将clickoutside事件与对话框绑定在一起。现在我的问题是，当我单击按钮打开对话框时，单击外部事件execute and close the dialog.How can I stop this event to executing而打开对话框？
浏览 2提问于2012-11-11得票数 0
回答已采纳
1回答
我使用vue版本2
我的父组件如下：
<template>
...
<page-heading
:searchChange="searchChange"
></page-heading>
...
</template>
<script>
import PageHeading from "@/views/app/report/PageHeading";
export default {
components: {
"page-hea
浏览 6提问于2022-08-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
