React 应用程序重置状态并在没有 e.preventDefault 的情况下重新呈现点击

Question

我有一个 React 应用程序，它似乎正在重置其所有状态并在单击按钮时重新呈现整个应用程序：

表单+按钮：

<form>
...
    <button
      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
        // e.preventDefault()
      }}>
    </button>
</form>

调用 preventDefault() 修复了问题，这向我暗示事件正在冒泡 DOM 树并触发其他处理程序，但没有任何处理程序应该导致刷新-像这样的现象。

根据 Igor Gonak 的建议，当我将封闭的 <form> 元素更改为 <div>.

时，它也会停止发生

但是，它仅在运行 npm start 之后第一次出现在新选项卡上，我必须关闭选项卡并重新启动开发版本才能重现该问题。

知道会发生什么吗？或者有没有人遇到过类似的问题？

Answer 1

根据 Igor Gonak 的评论，问题是由按钮类型默认为 submit 引起的。在这种特殊情况下，它通过在按钮上指定 type='button' 来解决。

react app resets state and rerenders without e.preventDefault on click