解决办法
内层 form 外添加一个阻断事件,阻止默认行为
<div onClick={(e) => { e.preventDefault(); }}>
<Form>
...
</Form>
</div>
起因
在开发过程中突然发现,某一个表单内的一个组件一点击按钮就会导致页面刷新。这个页面的结构类似于一个 Form 表单,内部有很多组件。其中有一个组件是自定义的组件,它拥有自己的搜索栏,而这个搜索栏也是一个 Form 表单。
排查
首先,先排查了此处是否有跳转的逻辑。显然没有。这时候想到了曾经处理过的一个问题,在 Form 中只有一个 input 元素导致触发提交自动刷新的问题(可以查看我其他的问题记录)。
但是看了下这里有多个输入元素,也不是这个问题。而之前有改到测试提出的一个优化,希望在搜索列表中任意回车可以提交,于是提交方式修改成了 submit type 的方式去触发 form 的提交。以此找到了问题。
原因
原生 form 是不支持你去嵌套的,或者说不推荐。当内层 form 触发 submit 事件的时候它也会发送到外层的 form,因此需要在内层 form 中去阻止这个事件。