我正在尝试让一个在 Material UI Dialog 组件中工作的表单。如果我将 Dialog 包装在表单标签中，它们甚至不会出现在生成的 html 中（还不知道为什么）...
<form onSubmit={someFunction}>
<Dialog>
...
</Dialog>
</form>
如果我反转它并将表单标签放在对话框中，表单元素会显示在生成的 html 中，但是设置为 type="submit" 的操作按钮将不会触发表单的 onSubmit。
<Dialog>
<form onSubmit={someFunction}>
...
</form>
</Dialog>
有没有人成功地让这个组合发挥作用？我知道我可以直接从操作按钮单击调用该函数，但我也在使用 Redux Form 并且在应用程序中有其他非对话框表单，所以我将它绑定到表单元素。所以我真的需要以某种方式调用从对话框提交的表单。
实际上 - 我已经/有onSubmit={handleSubmit(this.myFunction)}开始，这不是问题。问题原来是 Material UI 如何安装Dialog（显然与 不同react-toolbox）。他们将它安装在身体上——我认为是为了更容易定位——所以任何在身体之外的东西都Dialog被忽略了。
对于对话框内的窗体，按钮位于窗体外（这又明显不同于react-toolbox）。因此，要使其工作，您必须使用此处详述的 HTML 5 'form' 属性（如果需要，还需要为旧浏览器使用 poly-fill）。表单需要一个id属性，然后它外面的按钮需要一个表单属性，其值设置为表单的 id。然后对话框内的表单元素按预期运行。不过还是谢谢你的回复！
material-ui Dialog 组件继承自 material-ui Modal 组件，这意味着它接受props“disablePortal” - 默认情况下为 false。
来自文档：“禁用门户行为。子项保留在其父 DOM 层次结构中。” https://material-ui.com/api/modal/#props
默认情况下，对话框呈现为根 html 节点的子节点，要使其呈现在 <form> 标记内，您需要禁用门户行为。
<form onSubmit={someFunction}>
<Dialog disablePortal>
<DialogTitle>
title!
</DialogTitle>
<DialogContent>
form fields go here
</DialogContent>
<DialogActions>
<button type="submit">submit!</button>
</DialogActions>
</Dialog>
</form>嘿，是的，我有这个组合工作......好吧，我正在使用 react-toolbox 中的 Dialog 组件，它与 Material-ui 非常相似，但它们使用 Css-modules 作为样式而不是内联。
因此，您提供给onSubmit表单元素属性的handleSubmit函数将是来自 redux-form的函数。如果你想做任何事情，比如调度操作和存储数据，那么你需要将一个onSubmit函数传递给handleSubmit函数。会发生什么是您的onSubmit函数被调用的值（具有表单值的属性的对象）和来自 redux 存储的调度函数。您可以看到我拥有的项目，其中包含您正在寻找的设置。
而不是onSubmit={someFunction}，让它
<Dialog>
<form onSubmit={this.someFunction}>
...
</form>
</Dialog>