因此，我正在尝试将语义UI模式组件与表单组件一起使用。
我的问题是，如果同时使用这两个，则UI会变糟。
我创建了一个有关当前情况的沙盒：https://codesandbox.io/s/2n1pj96ry
如您所见，提交按钮未附加到表单。
如果将Form组件直接移到Modal组件内部，则如下所示：
<Modal...>
<Form>
...
</Form>
</Modal>
提交将附加到表单，但用户界面出现故障。
我尝试向这些组件添加不同的类（例如将ui modal添加到Form组件中，但是效果不佳。）
您有建议吗？
感谢您的帮助！
答案 0 :(得分：2)
您可以在Modal上使用as道具使其成为表单元素。
<Modal as={Form} onSubmit={e => handleSubmit(e)} open={true} size="tiny">
模式中任何带有submit类型的按钮都将触发onSubmit处理程序。我发现这是选择加入必填字段和浏览器轻松验证表单元素的一种好方法。
请确保将事件传递给您的提交处理程序，并使用preventDefault方法来避免浏览器自动尝试发布您的表单。
分叉您的沙箱并制作了working example。模态更改为<form>元素，Input具有required属性，浏览器将在触发onSubmit处理程序之前要求该元素有效。默认的表单操作被阻止，您可以使用任何东西进行处理。