form嵌套导致提交按钮刷新页面问题

解决办法

内层 form 外添加一个阻断事件，阻止默认行为

<div onClick={(e) => { e.preventDefault(); }}>
  <Form>
  ...
  </Form>
</div>

起因

在开发过程中突然发现，某一个表单内的一个组件一点击按钮就会导致页面刷新。这个页面的结构类似于一个 Form 表单，内部有很多组件。其中有一个组件是自定义的组件，它拥有自己的搜索栏，而这个搜索栏也是一个 Form 表单。

排查

首先，先排查了此处是否有跳转的逻辑。显然没有。这时候想到了曾经处理过的一个问题，在 Form 中只有一个 input 元素导致触发提交自动刷新的问题(可以查看我其他的问题记录)。

但是看了下这里有多个输入元素，也不是这个问题。而之前有改到测试提出的一个优化，希望在搜索列表中任意回车可以提交，于是提交方式修改成了 submit type 的方式去触发 form 的提交。以此找到了问题。

原因

原生 form 是不支持你去嵌套的，或者说不推荐。当内层 form 触发 submit 事件的时候它也会发送到外层的 form，因此需要在内层 form 中去阻止这个事件。