Question

我正在尝试在Material UI Dialog组件内部运行一个表单。如果我将Dialog包装在表单标签中，它们甚至不会显示在生成的html中（不知道为什么）......

<form onSubmit={someFunction}>
  <Dialog>
    ...
  </Dialog>
</form>

如果我将其反转并将表单标记放在对话框中，则表单元素会显示在生成的html中，但是设置为type =“submit”的操作按钮不会触发表单的onSubmit。

<Dialog>
  <form onSubmit={someFunction}>
    ...
  </form>
</Dialog>

有没有人能让这个组合起作用？我知道我可以直接从动作按钮单击调用该函数，但我也在使用Redux Form并在应用程序中有其他非对话框形式，所以我将它绑定到表单元素。所以我真的需要以某种方式从Dialog调用表单提交。

Answer 1

实际上 - 我已经/ onSubmit={handleSubmit(this.myFunction)}开始，这不是问题。问题原来是Material UI如何安装Dialog（显然与react-toolbox不同）。它们将它安装在身体上 - 我假设更容易定位 - 所以Dialog之外的任何东西都会被忽略。

使用Dialog中的表单，按钮位于表单之外（这显然与react-toolbox明显不同）。因此，要使其工作，您必须使用HTML 5＆＃39;表格＆＃39;属性为详细here（如果需要，还包括旧版浏览器的填充）。表单需要id属性，然后外部的按钮需要一个表单属性，其值设置为表单的id。然后，对话框内的表单元素按预期运行。谢谢你的回复！

Answer 2

material-ui Dialog组件继承自material-ui Modal组件，这意味着它接受道具“ disablePortal”-默认情况下为false。

来自文档的

： “禁用门户网站行为。子级将保留在其父DOM层次结构内。” https://material-ui.com/api/modal/#props

默认情况下，该对话框呈现为根html节点的子级，要使其呈现在

标记内，您需要禁用门户网站行为。

<form onSubmit={someFunction}>
  <Dialog disableProtal>
    <DialogTitle>
      title!
    </DialogTitle>
    <DialogContent>
      form fields go here
    </DialogContent>
    <DialogActions>
        <button type="submit">submit!</button>
    </DialogActions>
  </Dialog>
</form>

Answer 3

嘿，是的，我有这个组合工作......好吧我正在使用react-toolbox中的Dialog组件，它与Material-ui非常相似，但是它们使用Css模块代替内联样式。

因此，您提供给表单元素的onSubmit属性的函数将是redux-form的handleSubmit函数。如果您想执行任何操作（例如调度操作和存储数据），则需要将onSubmit函数传递给handleSubmit函数。会发生什么：使用值（具有表单值属性的对象）和redux存储中的调度函数调用onSubmit函数。您可以看到我所拥有的project具有您正在寻找的设置。

使用React在Material UI对话框中表单

3 个答案: