Ant Design 5模态框表单：解决复选框切换重置输入问题

核心原因 #

切换showAdvancedFilters时直接卸载/重新渲染表单字段，导致Ant Design Form的对应字段状态被清除，已输入内容丢失。

可行方案 #

1. 用CSS控制显示隐藏（推荐） #

不要用条件渲染卸载Form.Item，而是给高级筛选的Form.Item加style={{ display: showAdvancedFilters ? 'block' : 'none' }}，让字段始终存在于DOM中，表单状态不会丢失。

示例代码：

<Modal open={modalVisible} onOk={handleOk} onCancel={handleCancel}>
  <Form form={form} layout="vertical">
    {/* 固定显示的3个字段 */}
    <Form.Item name="name" label="名称">
      <Input />
    </Form.Item>
    <Form.Item name="code" label="编码">
      <Input />
    </Form.Item>
    <Form.Item name="status" label="状态">
      <Select options={statusOptions} />
    </Form.Item>

    {/* 高级筛选开关 */}
    <Form.Item name="showAdvanced" valuePropName="checked">
      <Checkbox onChange={(e) => setShowAdvancedFilters(e.target.checked)}>
        Show advanced filters
      </Checkbox>
    </Form.Item>

    {/* 高级筛选字段：用display控制显示/隐藏 */}
    <Form.Item name="startDate" label="开始日期" style={{ display: showAdvancedFilters ? 'block' : 'none' }}>
      <DatePicker />
    </Form.Item>
    <Form.Item name="endDate" label="结束日期" style={{ display: showAdvancedFilters ? 'block' : 'none' }}>
      <DatePicker />
    </Form.Item>
    <Form.Item name="type" label="类型" style={{ display: showAdvancedFilters ? 'block' : 'none' }}>
      <Select options={typeOptions} />
    </Form.Item>
  </Form>
</Modal>

2. 保留Form.Item，仅控制子组件显示 #

如果必须隐藏输入组件，不要卸载Form.Item本身，只在Form.Item内部控制输入组件的显示：

<Form.Item name="startDate" label="开始日期">
  {showAdvancedFilters && <DatePicker />}
</Form.Item>

这种方式下Form.Item始终存在，表单会保留该字段的状态，只是隐藏时用户无法编辑。

3. 手动缓存高级字段值 #

如果前两种方式不适用，可以在切换状态时先缓存高级字段的值，切换完成后再赋值回去：

const handleToggleAdvanced = (checked) => {
  // 缓存当前高级字段的值
  const advancedValues = form.getFieldsValue(['startDate', 'endDate', 'type']);
  setShowAdvancedFilters(checked);
  // 切换后重新赋值
  setTimeout(() => {
    form.setFieldsValue(advancedValues);
  }, 0);
};

// 复选框绑定这个处理函数
<Checkbox onChange={(e) => handleToggleAdvanced(e.target.checked)}>
  Show advanced filters
</Checkbox>

注意：这种方式需要精准指定要缓存的字段名，适合复杂场景，但不如前两种简洁。

关键提醒 #

• 绝对避免直接卸载Form.Item，Ant Design Form会在字段卸载时自动清除对应的值状态。
• 优先用CSS控制显示隐藏，这是最稳定、无需额外逻辑的方案。

内容的提问来源于stack exchange，提问作者jack-davison