TanStack Form 中表单重置与 select 元素的交互问题解析

问题现象

在使用 TanStack Form 库处理表单时，开发者可能会遇到一个特殊现象：当表单中包含 <select> 元素时，调用 form.reset() 方法后，select 元素的值会被重置为第一个选项，而不是开发者指定的 defaultValue。

技术背景

在 Web 开发中，表单重置有两种不同的机制：

1. 原生 HTML 表单重置：通过 <button type="reset"> 触发，会将所有表单控件重置为它们的初始值（即页面加载时的值）

2. TanStack Form 的重置：通过 form.reset() 方法实现，旨在将表单状态重置为初始值或指定的默认值

问题根源

当开发者同时使用两种重置机制时（即同时设置了 type="reset" 的按钮和调用了 form.reset()），会发生冲突。具体表现为：

1. TanStack Form 首先执行重置逻辑，正确地将 select 值设置为 defaultValue
2. 紧接着，浏览器的原生重置机制被触发，将 select 值重置为 DOM 中的第一个选项

解决方案

推荐方案

<button
  type="button"  // 避免使用 type="reset"
  onClick={() => form.reset()}
>
  重置表单
</button>

替代方案

如果必须使用 type="reset"，可以通过阻止默认行为来解决：

<button
  type="reset"
  onClick={(e) => {
    e.preventDefault();
    form.reset();
  }}
>
  重置表单
</button>

最佳实践建议

1. 在 TanStack Form 项目中，建议统一使用 form.reset() 方法来重置表单状态
2. 避免混合使用原生重置和框架重置机制
3. 对于复杂表单，考虑在重置时显式指定所有字段的默认值
4. 在表单设计文档中明确重置行为的预期效果

技术原理深入

TanStack Form 的表单状态管理是基于 React 的状态机制实现的，而原生 HTML 表单重置是浏览器层面的行为。当两者同时作用时，React 的重新渲染可能会被浏览器的原生行为覆盖，导致最终显示结果不符合预期。

理解这种框架与原生行为的交互关系，对于处理类似的前端表单问题具有普遍指导意义。