React Semantic-UI：带有表单组件的模态组件？是否可以？

Question

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

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

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

正如您现在看到的，提交按钮没有附加到表单上。如果我移动Form直接组件内部Modal组件，这样的： <Modal...> <Form> ... </Form> </Modal> 在提交将附着于形式，但UI breakes下来。

我尝试不同的类添加到这些组件（如ui modal到Form组件，但它不运作良好）。

你有什么建议吗？

谢谢你的帮助！

Answer 1

您可以使用asModal 上的prop 使其成为表单元素。

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

submit模式中具有该类型的任何按钮都将触发 onSubmit 处理程序。我发现这是一个很好的方式来选择加入必填字段和浏览器对表单元素的轻松验证。

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

分叉你的沙箱并制作了一个工作示例。模态更改为<form>元素，输入具有required属性，浏览器将要求元素在触发onSubmit处理程序之前有效。默认表单操作被阻止，您可以根据需要处理任何内容。