所以，我正在尝试将语义 UI 模式组件与表单组件一起使用。
我的问题是，如果我将这两个一起使用，UI 会变得很糟糕。
我创建了一个关于我当前情况的沙箱：https ://codesandbox.io/s/2n1pj96ry
正如您现在看到的，提交按钮没有附加到表单上。如果我将Form组件直接移动到组件内部Modal，如下所示：
提交
<Modal...>
<Form>
...
</Form>
</Modal>
将附加到表单，但 UI 会崩溃。
我尝试向这些组件添加不同的类（就像组件一样ui modal，Form但效果不佳）。
你有什么建议吗？
谢谢你的帮助！
您可以使用asModal 上的道具使其成为表单元素。
<Modal
as={Form}
onSubmit={e => handleSubmit(e)}
open={true}
size="tiny">
模式中具有该类型的任何按钮submit都将触发 onSubmit 处理程序。我发现这是一种选择必填字段并通过浏览器轻松验证表单元素的好方法。
请务必将事件传递给您的提交处理程序并使用该preventDefault方法来避免浏览器自动尝试发布您的表单。
分叉您的沙箱并制作了一个工作示例。模态变为一个<form>元素，输入具有required属性，浏览器会在触发处理程序之前要求元素有效onSubmit。默认表单操作被阻止，您可以根据需要进行处理。