ReactJS如何在表单提交请求中排除disabled状态的表单项？

解决方案 #

你遇到的是Ant Design Form组件的默认字段收集逻辑问题：折叠面板内的字段未被收集，本质是折叠时面板DOM被销毁（通常是开启了Collapse的destroyInactivePanel属性），对应的Form.Item随之注销，自然不会纳入表单值；而disabled状态仅会禁用输入交互，Form.Item仍处于注册状态，所以对应字段哪怕值为undefined也会被收集。

下面是两种最常用的前端侧解决方式：

方案1：动态控制Form.Item的name属性（最贴合需求，侵入性最小）

Form.Item只有设置了有效name属性时，才会被纳入表单字段收集。你可以在字段禁用时，直接把name设为undefined即可自动排除该字段：

const isExampleDisabled = true; // 替换为你的实际禁用判断逻辑

<Panel header="ExamplePanel" key="1">
  <Form.Item 
    name={isExampleDisabled ? undefined : "ExampleItem"} 
    label="Form Item"
  >
    <InputNumber
      min={0}
      disabled={isExampleDisabled}
    />
  </Form.Item>
</Panel>

这个方案不需要修改提交逻辑，和折叠面板排除字段的原理完全一致。

方案2：提交前统一过滤表单值（通用性最强，适合批量处理）

如果需要全局处理所有disabled字段或者值为undefined的字段，可以在onFinish提交回调里先过滤再发起请求：

const onFinish = (values) => {
  // 过滤所有值为undefined的字段
  const submitValues = Object.fromEntries(
    Object.entries(values).filter(([_, value]) => value !== undefined)
  );
  // 也可以结合你的disabled字段列表过滤，精准度更高
  // const disabledFields = ['ExampleItem', '其他禁用字段名'];
  // const submitValues = Object.fromEntries(
  //   Object.entries(values).filter(([key]) => !disabledFields.includes(key))
  // );

  // 提交处理后的submitValues即可
  yourSubmitRequest(submitValues);
};

你之前调整defaultValue无效的原因是：defaultValue仅能修改字段的初始值，只要Form.Item处于注册状态，不管值是什么都会被纳入收集范围，修改默认值不会把字段从提交列表中移除。

内容的提问来源于stack exchange，提问作者Conner M.