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

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'表单'属性(如果需要,还可以使用旧填充程序的填充).表单需要一个id属性,然后它外面的按钮需要一个表单属性,其值设置为表单的id.然后,对话框内的表单元素按预期运行.谢谢你的回复!

Answer 2

Material-ui Dialog 组件继承自 Material-ui Modal 组件，这意味着它接受“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>

Answer 3

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

因此，您为 form 元素的属性提供的函数onSubmit将是handleSubmitredux-form 中的函数。如果您想做任何事情，例如调度操作并存储数据，那么您将需要将一个onSubmit函数传递给该handleSubmit函数。发生的情况是onSubmit使用值（具有表单值属性的对象）和来自 redux 存储的调度函数调用您的函数。您可以查看我的项目，其中包含您正在寻找的设置。