React Semantic-UI：带有表单组件的模态组件？可能吗？

Question

所以，我正在尝试将 Semantic UI 模态组件与表单组件一起使用。

我的问题是，如果我将这两个一起使用，UI 会变得很糟糕。

我创建了一个关于我当前情况的沙盒：https://codesandbox.io/s/2n1pj96ry

您现在可以看到 提交 按钮未附加到 表单。 如果我将Form 组件直接移动到Modal 组件内，如下所示： <Modal...> <Form> ... </Form> </Modal> submit 将附加到 form，但 UI 出现故障。

我尝试为这些组件添加不同的类（例如将ui modal 添加到Form 组件，但效果不佳）。

您有什么建议吗？

感谢您的帮助！

Answer 1

您可以使用 Modal 上的 as 属性使其成为表单元素。

<Modal 
   as={Form} 
   onSubmit={e => handleSubmit(e)}
   open={true}
   size="tiny">

在您的模式中任何带有submit 类型的按钮都会触发 onSubmit 处理程序。我发现这是一种选择必填字段并通过浏览器轻松验证表单元素的好方法。

确保将事件传递给您的提交处理程序并使用preventDefault 方法来避免浏览器自动尝试发布您的表单。

分叉你的沙盒并创建一个working example。模式更改为<form> 元素，输入具有required 属性，浏览器将在触发onSubmit 处理程序之前要求该元素有效。默认表单操作被阻止，您可以随意处理。