添加样式后响应表单重新加载页面

Question

对于表单，我使用的是“react final-form”脚本(我也尝试过使用“react form”)，如果我在输入中添加样式，那么onSubmit就不能工作(它会重新加载整个页面)。

我搞不懂为什么。

这里有我的部分代码-> https://codesandbox.io/embed/boring-wind-gnqx5?fontsize=14&hidenavigation=1&theme=dark的片段

如果我在App中删除了FormContainerPart <- ->，那么它就能工作了。

谢谢你的帮助！

Answer 1

它不是关于样式，而是关于您生成的HTML结构。FormContainerPart是一个form，所以当您提交表单(单击按钮)时，您从react-final-form 提交Form，从FormContainerPart提交 form。

而且，由于您没有通过onSubmit在form上捕获FormContainerPart处理程序，所以它将进入默认导航器行为，即:重新加载页面

因此，由于FormContainerPart不需要成为form，所以只需将styled更改为

export const FormContainerPart = styled.div`
...
`