React中三元切换同类型按钮导致表单意外提交的诡异行为

这本质是React的DOM节点复用机制和浏览器的事件关联行为共同导致的：

• 当用三元运算符切换同类型的<button>元素时，React的DOM diff算法会把前后两个按钮判定为同一节点，不会销毁重建，只会复用现有DOM节点并更新属性（比如把type从button改成submit）。
• 你点击初始的type="button"按钮后，触发状态更新，React立即复用该按钮节点修改type。此时浏览器会把之前的点击操作和更新后的submit按钮关联，误将这次点击判定为对提交按钮的触发，从而自动触发表单提交。

而拆分条件渲染两个独立按钮，或者换成不同组件时：

• React会判定前后是不同的DOM节点，销毁旧按钮、创建新按钮。新按钮和之前的点击事件完全无关，自然不会触发提交。

解决办法 #

有两种简单方式可以避免这个问题：

1. 拆分条件渲染独立按钮：

{/* 分开渲染两个按钮，避免节点复用 */}
{!isSubmit && <button type="button" onClick={() => setIsSubmit(true)}>切换为提交</button>}
{isSubmit && <button type="submit">提交</button>}

2. 给按钮添加唯一key强制React创建新节点：

{isSubmit ? (
  <button key="submit-button" type="submit">提交</button>
) : (
  <button key="toggle-button" type="button" onClick={() => setIsSubmit(true)}>切换为提交</button>
)}

添加key后，React会把它们识别为不同节点，不会复用DOM，也就不会触发意外的表单提交。

内容的提问来源于stack exchange，提问作者OrderAndChaos