React中实现带依赖联动选择框的动态表单相关问题咨询

1. 给动态字段补充联动规则元数据 #

• 你在数据库存储表单字段配置的时候，额外加三个配置项：depend_on（依赖的字段唯一标识）、depend_trigger（依赖字段触发联动的事件，一般是change）、options_fetch_api（依赖值变化后拉取当前字段选项的接口地址模板）。
• 以车型字段为例，配置可以存为：depend_on: "manufacturer", depend_trigger: "change", options_fetch_api: "/api/models?manufacturer_id={manufacturer_value}"
• 所有动态字段都必须分配全局唯一的field_key用来做匹配识别，不要用渲染索引或者临时生成的ID。

2. 实现通用的全局状态监听器 #

• 不用给每个固定字段写专属监听逻辑，搭建一个通用的表单状态管理容器，所有动态字段的值变更时，自动把最新的field_key和对应值同步到这个容器里。
• 给容器加一个通用的变更回调：每次任意字段值更新，遍历所有已渲染的动态字段，检查该字段是否存在depend_on配置，且配置的依赖字段就是本次变更的字段。
• 匹配到联动字段后，直接把依赖字段的最新值替换到options_fetch_api的模板占位符里，请求接口拿到新的选项列表，更新对应字段的下拉选项即可。

3. 边缘场景处理 #

• 依赖字段的值清空时，同步清空联动字段的已选值和选项列表，添加请先选择上方[依赖字段名称]的占位提示。
• 表单初始化渲染时，先检查每个字段的依赖项，如果依赖项有默认值，直接触发一次联动拉取选项，避免初始状态下联动字段没有可选内容。

最简伪代码示例 #

// 通用字段变更处理函数
const handleFieldChange = async (changedFieldKey, changedValue) => {
  // 更新全局表单状态
  formState[changedFieldKey] = changedValue
  // 遍历所有字段找关联项
  for (const field of allDynamicFields) {
    if (field.depend_on === changedFieldKey) {
      // 替换接口模板变量
      const requestApi = field.options_fetch_api.replace(`{${changedFieldKey}}`, changedValue)
      // 拉取新选项
      const newOptions = await fetch(requestApi).then(res => res.json())
      // 更新对应字段的选项
      field.options = newOptions
      // 清空原有选中值
      formState[field.field_key] = undefined
    }
  }
}

内容的提问来源于stack exchange，提问作者Paulo Alozen