使用React在Material UI对话框中的表单 [英] Form in Material UI Dialog using React

问题描述

我正在尝试使表单在Material UI对话框组件内部工作.如果我将Dialog包装在表单标签中，它们甚至不会显示在结果html中(不知道为什么)...

I am trying to get a form working inside of a Material UI Dialog component. If I wrap the Dialog in the form tags, they do not even show up in the resulting html (no idea why yet)...

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

如果我将其反转并将表单标签放在对话框中，则表​​单元素将显示在结果html中，但是设置为type ="submit"的操作按钮将不会触发表单的onSubmit.

If I reverse it and put the form tags inside the Dialog, the form elements show up in the resulting html, but then the action button set to type="submit" will not fire the form's onSubmit.

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

有人能成功实现这种组合吗?我知道我可以直接通过单击操作按钮来直接调用该函数，但是我也使用Redux Form，并且在应用程序中还有其他非对话形式，因此我将其绑定到form元素.因此，我确实需要以某种方式从Dialog调用表单提交.

Has anyone had any success getting this combination to work? I know I can just call the function directly from the action button click, but I am also using Redux Form and have other non-dialog forms in the app, so I have it bound to the form element. So I really need to invoke the form submit from a Dialog somehow.

推荐答案

实际上-我已经/已经开始使用onSubmit={handleSubmit(this.myFunction)}，但这不是问题.问题出在Material UI如何挂载Dialog(显然与react-toolbox不同)上.他们将其安装在身体上-我认为是为了方便放置-因此Dialog之外的任何内容都将被忽略.

Actually - I have/had the onSubmit={handleSubmit(this.myFunction)} to begin with and that was not the issue. The issue turned out to be how Material UI mounts the Dialog (which apparently is different than react-toolbox). They mount it on the body - I assume for easier positioning - so anything outside of the Dialog is ignored.

将表单置于对话框中，按钮位于表单外部(显然又与react-toolbox不同).因此，要使其正常工作，您必须使用HTML 5"form"属性，其详细说明

With the form inside the Dialog, the buttons are outside the form (which is again apparently different than react-toolbox). So to make it work, you have to use the HTML 5 'form' attribute as detailed here (along with a poly-fill for older browsers if needed). The form needs an id attribute and then the button outside it needs a form attribute with the value set to the id of the form. Then the form elements inside the dialog behave as expected. Thanks for the response though!

这篇关于使用React在Material UI对话框中的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！