在 React 中如何不依赖 state 获取表单数据

最近在弄一个选项面板，采用了一种不依赖 React state 来管理表单数据的新设计。

该设计基于 HTML 原生表单行为，通过配置表单元素的 name 属性，借助浏览器自动的数据收集机制，实现了一个灵活且高效的选项面板。运营人员可以轻松地配置和组合选项，设置选项间的关联条件（例如：选中选项 A 自动调整选项 B 的显示状态），并能应对频繁新增组件的需求。

设计原理

传统的 React 开发表单时，常常需要借助 state 来管理每个输入项的值，这在组件数量众多或动态变化时会增加额外的复杂性。我们的新方案直接利用浏览器的默认表单行为：

• 自动关联：只需为每个表单元素添加 name 属性，浏览器会将这些元素视为表单数据的一部分。
• 数据收集：在表单提交时，浏览器会自动根据 name 属性收集各个元素的值，并以键值对的形式组织数据提交给服务器或供后续处理。

这种方式使得开发者可以专注于表单的展示和交互逻辑，而无需关注每个字段的状态同步问题。

获取表单数据的方法

为了利用这一机制，我们主要采用两种方式来获取表单数据：

通过 onSubmit 事件

利用表单的提交事件，可以结合 FormData API 实现数据的快速收集：

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();  // 阻止页面刷新
  const formData = new FormData(event.target);
  const formDataObject = {};

  formData.forEach((value, key) => {
    formDataObject[key] = value;
  });

  console.log(formDataObject);  // 输出键值对形式的表单数据
});

在上述代码中，FormData 自动将具有 name 属性的表单元素数据转换为对象，简化了数据获取的过程。

直接使用 FormData

除了监听提交事件，我们也可以直接获取表单实例并利用 FormData 对象遍历数据：

const form = document.querySelector('form');
const formData = new FormData(form);

formData.forEach((value, key) => {
  console.log(key, value);  // 依次输出每个表单项的 name 和 value
});

这种方式适用于需要在特定时刻手动获取表单数据的场景。

设计优势

采用原生表单行为来收集数据，相比传统的 state 管理方式具有以下优势：

简化开发流程

• 无需状态管理：每个表单元素的值由浏览器自动维护，开发者不必在 React 中频繁同步状态更新。
• 易于扩展：新增表单元素只需配置正确的 name 属性，无需额外修改数据收集逻辑。
• 跨浏览器兼容：浏览器对原生表单行为的支持较为一致，减少了跨浏览器兼容性问题。

优化组件开发

• 组件逻辑更清晰：将数据管理交给浏览器，开发者可以将精力更多地集中于 UI 展示和交互逻辑。
• 减少代码冗余：避免了大量冗余的状态更新和数据绑定代码，整体代码量更简洁高效。
• 提高开发效率：在快速迭代和动态表单场景下，开发和调试成本显著降低。

示例：动态表单配置

以下是一个基于上述设计的简化示例，展示了如何通过配置 name 属性让浏览器自动管理表单数据：

<form>
  <!-- 文本输入框 -->
  <input type="text" name="用户名" placeholder="请输入用户名" />

  <!-- 单选框 -->
  <label>
    <input type="radio" name="性别" value="男"> 男
  </label>
  <label>
    <input type="radio" name="性别" value="女"> 女
  </label>

  <!-- 复选框 -->
  <label>
    <input type="checkbox" name="订阅" value="新闻"> 订阅新闻
  </label>
  <label>
    <input type="checkbox" name="订阅" value="更新"> 订阅更新
  </label>

  <!-- 下拉框 -->
  <select name="国家">
    <option value="中国">中国</option>
    <option value="美国">美国</option>
    <option value="日本">日本</option>
  </select>

  <button type="submit">提交</button>
</form>

在该示例中，无论是文本框、单选、复选还是下拉框，只要设置了 name 属性，浏览器便能自动将它们的数据收集起来，极大地简化了数据处理流程。

总结

通过充分利用浏览器的原生表单行为，我们可以避免在 React 中使用 state 来管理每个表单项的值。这种设计不仅降低了代码复杂度和维护成本，而且使得表单组件更加灵活和易于扩展。在需要频繁动态添加组件和设置复杂关联条件的选项面板中，此方案能够显著提升开发效率和用户体验。