React中preventDefault()偶发阻止默认行为失效问题求助

问题现象 #

个人首个React项目开发中，preventDefault()方法在含3个提交按钮的页面出现偶发故障：

• 部分场景下第一个按钮可正常通过preventDefault()阻止默认行为，点击第二个按钮时拦截逻辑完全不生效
• 部分场景下第一个按钮也会失效，直接无视preventDefault()逻辑触发页面刷新
  通过e.cancelable检测，第一个按钮未触发页面刷新时该属性返回值为true，常规排查未定位到根因。
  补充背景：该按钮组件需要先点击其他按钮修改状态后才会渲染，同类条件渲染逻辑在项目其他模块运行正常。

现有实现代码 #

事件处理函数 #

const submitHandlerT = e => {
    e.preventDefault();
    setTemperatureV({temperature: detailsT.temperatureV, time: detailsT.timeV1});

}

const submitHandlerP = e => {
    e.preventDefault();
    setPressureV({pressure: detailsP.pressureV, time: detailsP.timeV2});
}

const submitHandlerF = e => {
    e.preventDefault();
    setFlowRateV({flowRate: detailsF.flowRateV, time: detailsF.timeV3});
}

按钮渲染代码 #

<button className="button-75 buttonsSign2"><span class="text" onClick={submitHandlerT}>Submit</span></button>

<button className="button-75 buttonsSign2" role="button"><span class="text" onClick={submitHandlerP}>Submit</span></button>

<button className="button-75 buttonsSign2" role="button"><span class="text" onClick={submitHandlerF}>Submit</span></button>

故障根因 #

故障由两处不规范的DOM写法共同导致：

• 事件绑定层级错误：点击事件绑定在了按钮内部的<span>子元素上，而非<button>标签本身。虽然事件冒泡机制在多数场景下能触发span上的处理函数，但如果点击区域落在span外的按钮内边距、边框位置，根本不会触发span上的点击回调，e.preventDefault()自然不会执行。同时不同浏览器对按钮默认提交行为的事件冒泡路径处理存在细微差异，会进一步提升偶发失效的概率。
• 按钮缺少显式type声明：所有位于<form>标签内的<button>，如果不手动指定type属性，默认值就是submit，点击后会直接触发表单提交、页面刷新的默认行为。将拦截逻辑绑定在子元素上，本身就无法100%覆盖按钮的所有点击场景，才会出现随机失效的现象。
• 额外不规范点：代码中span标签使用了原生HTML的class属性而非React要求的className，会触发控制台渲染警告，说明DOM属性挂载存在异常，也可能间接影响事件绑定的稳定性。

修复方案 #

1. 将所有点击事件处理函数从内部span迁移到外层button标签上，不要在按钮的子元素上绑定表单拦截逻辑
2. 给所有不需要触发原生表单提交的按钮显式添加type="button"属性，从根源上避免默认submit行为，不要仅依赖e.preventDefault()做拦截
3. 将span标签上的class属性修改为React规范的className，消除DOM渲染警告

修复后的按钮代码参考：

<button type="button" className="button-75 buttonsSign2" onClick={submitHandlerT}>
  <span className="text">Submit</span>
</button>

<button type="button" className="button-75 buttonsSign2" onClick={submitHandlerP}>
  <span className="text">Submit</span>
</button>

<button type="button" className="button-75 buttonsSign2" onClick={submitHandlerF}>
  <span className="text">Submit</span>
</button>

如果业务确实需要按钮触发表单提交，建议统一将提交逻辑绑定在外层form标签的onSubmit事件上处理，不要给每个按钮单独绑定点击事件做拦截，该写法不符合React表单的最佳实践，很容易出现拦截遗漏。

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