使用React创建Material UI对话框中的表单

我正在尝试获取工作在Material UI对话框组件中的表单。如果我在表单标签包装的对话，他们甚至不中生成的HTML显示（不知道为什么还）...使用React创建Material UI对话框中的表单

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

如果我扭转，并把表单标签对话框里面，表单元素显示在HTML中，但是设置为type =“submit”的动作按钮不会触发表单的onSubmit。

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

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

来源

2016-03-28 D Durham

-1

嘿是啊我有这个组合工作......以及我使用的反应工具箱中的对话框组件与Material-ui非常相似，但他们使用CSS样式而不是内联。

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

来源

2016-03-28 15:36:04 natac

的问题是关于材料的UI，并没有关于反应-工具箱 – NSN

其实 - 我有/有onSubmit={handleSubmit(this.myFunction)}开始，这不是问题。原来的问题是Material UI如何挂载Dialog（显然与react-toolbox不同）。他们将它安装在身体上 - 我假设为了更容易定位 - 因此忽略Dialog以外的任何内容。

使用对话框中的窗体，按钮不在窗体中（与react-toolbox显然不同）。因此，要使其工作，必须使用HTML5'表单'属性作为详细的here（如果需要，还可以使用旧填充的填充）。表单需要一个id属性，然后它外面的按钮需要一个表单属性，其值设置为表单的ID。然后，对话框中的表单元素按预期工作。尽管谢谢你的回应！

来源

2016-03-28 16:23:45

-1

代替onSubmit={someFunction}，使其

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

来源

2016-08-15 08:09:27

问题是专门为相反的情况。 – NSN

使用React创建Material UI对话框中的表单

回答

相关问题