ProFormText如何动态控制字段显隐？

Question

在使用 ProFormText 组件时，如何根据表单其他字段的值动态控制其显示或隐藏？例如，当某个下拉框选择“自定义”选项时，才显示对应的 ProFormText 输入项。常见问题在于，直接使用 `visible` 或 `hidden` 属性无效，且通过 `shouldUpdate` 或 `dependencies` 监听字段变化后，组件未重新渲染。如何结合 `ProForm.Group` 或 `formItemProps` 正确实现条件渲染？需确保不破坏表单数据流，同时避免出现初始值丢失或校验异常等问题。这是实际开发中高频遇到的交互需求，尤其在复杂动态表单场景下尤为关键。

Answer 1

1. 问题背景与核心挑战

在使用 Ant Design Pro 的 ProFormText 组件构建动态表单时，开发者常需根据其他字段的值来控制某输入项的显示或隐藏。例如：当用户从下拉框中选择“自定义”选项时，才展示一个用于填写自定义内容的 ProFormText 输入框。

然而，直接使用 visible 或 hidden 属性往往无效，因为这些属性并未被 ProFormText 原生支持。此外，即便通过 shouldUpdate 或 dependencies 监听字段变化，组件仍可能未触发重新渲染，导致条件逻辑失效。

该问题的根本原因在于对 ProForm 渲染机制的理解不足，以及未能正确利用其提供的响应式 API 来驱动 UI 变化。

2. 技术原理分析：ProForm 的渲染机制

• 字段依赖监听：ProForm 支持通过 dependencies 显式声明字段间的依赖关系，从而触发重新渲染。
• shouldUpdate 机制：该属性接收一个函数，返回布尔值以决定是否重新渲染组件，适合复杂判断逻辑。
• formItemProps 配置：可用于设置 Form.Item 的原生属性（如 hidden），但必须确保父级能感知到状态变更。
• ProForm.Group 分组控制：可将多个条件字段包裹在组内，提升结构清晰度和更新效率。

理解上述机制是实现动态渲染的基础。

3. 解决方案层级递进

3.1 初级方案：使用 dependencies + hidden 控制显隐

<ProFormSelect
  name="type"
  label="类型"
  options={[
    { label: '默认', value: 'default' },
    { label: '自定义', value: 'custom' }
  ]}
/>

<ProFormText
  name="customValue"
  label="自定义值"
  formItemProps={{
    hidden: (form) => form.getFieldValue('type') !== 'custom'
  }}
  dependencies={['type']}
/>

此方法利用 dependencies 触发更新，并通过 formItemProps.hidden 动态控制隐藏状态。

3.2 中级方案：结合 shouldUpdate 实现精细化控制

<ProFormText
  name="customValue"
  label="自定义值"
  shouldUpdate={(prev, next) => prev.type !== next.type}
  children={({ getFieldValue }) => {
    const type = getFieldValue('type');
    return type === 'custom' ? (
      <Input placeholder="请输入自定义内容" />
    ) : null;
  }}
/>

通过 shouldUpdate 捕获字段变化，并在 children 函数中进行条件渲染，避免 DOM 残留。

3.3 高级方案：封装动态字段组件，提升复用性

方案	适用场景	数据流保护	初始值处理	校验兼容性
formItemProps.hidden	简单显隐控制	✅ 完整保留	✅ 自动继承	⚠️ 校验仍执行
shouldUpdate + children	复杂逻辑或异步渲染	✅ 状态隔离良好	✅ 支持 defaultValue	✅ 按需注册校验
ProForm.Group 包裹 + 条件渲染	多字段联动组	✅ 组内统一管理	✅ 初始化稳定	✅ 分组校验可控

3.4 推荐实践：使用 ProForm.Group 进行结构化组织

<ProForm.Group title="高级配置" collapsible>
  <ProFormSelect
    name="configMode"
    label="配置模式"
    options={[
      { value: 'basic', label: '基础' },
      { value: 'advanced', label: '高级' }
    ]}
  />
  <ProForm.Item noStyle shouldUpdate>
    {(form) =>
      form.getFieldValue('configMode') === 'advanced' ? (
        <ProFormText
          name="advancedSetting"
          label="高级参数"
          rules={[{ required: true }]}
        />
      ) : null
    }
  </ProForm.Item>
</ProForm.Group>

通过 noStyle 和嵌套 ProForm.Item 实现精准控制，同时保持表单项校验和数据流完整。

4. 常见陷阱与规避策略

1. 初始值丢失：若使用条件渲染移除组件，其值不会自动清除，可能导致脏数据残留。建议配合 fieldProps.onChange 手动重置。
2. 校验异常：隐藏字段若仍有校验规则，会引发提交失败。可通过动态 rules 或提交前清理解决。
3. 性能问题：频繁 re-render 可能影响体验，应合理使用 shouldUpdate 的 diff 逻辑。
4. 表单布局错乱：条件渲染可能导致栅格断层，推荐使用 <div style={{ display: hidden ? 'none' : 'block' }}> 替代移除节点。

5. 流程图：动态字段渲染决策路径

graph TD
    A[开始] --> B{是否为简单显隐?}
    B -- 是 --> C[使用 dependencies + formItemProps.hidden]
    B -- 否 --> D{是否涉及多字段联动?}
    D -- 是 --> E[使用 ProForm.Group + shouldUpdate]
    D -- 否 --> F[使用 shouldUpdate + children 函数渲染]
    C --> G[验证初始值与校验行为]
    E --> G
    F --> G
    G --> H[测试表单提交与重置逻辑]
    H --> I[完成]

6. 总结最佳实践原则

• 优先使用 dependencies 声明依赖，确保监听生效。
• 避免直接操作 DOM 控制显隐，应交由 React 响应式机制处理。
• 对于复杂逻辑，采用 shouldUpdate 结合函数式 children 提升灵活性。
• 始终关注表单数据流完整性，防止字段值意外丢失或残留。
• 利用 ProForm.Group 组织相关联的动态字段，增强可维护性。
• 在表单提交前，可通过 form.validateFields 或手动过滤非激活字段来优化校验流程。
• 考虑使用 transform 或 renderFormItem 在更高级别拦截渲染过程。
• 对高频交互场景，可抽象出通用的 ConditionalFormItem 高阶组件。
• 启用 preserve={false} 可在字段卸载时自动清除值，避免数据污染。
• 结合 watch API 监听全局状态变化，实现跨字段联动。