Semantic React UI受控组件与React Final Form适配异常相关问题咨询

版本前提 #

使用依赖版本为：Semantic React UI 2.0.2、react-final-form 6.5.3

问题1：封装后自定义受控Dropdown无法响应父组件state修改 #

• 解决方案：
  • 封装自定义组件时，设置父组件传入的控制值优先级高于Field自带的input.value，优先绑定控制值到Dropdown的value属性
  • 监听父组件控制值的变化，变化时主动调用Field提供的input.onChange方法同步表单内部状态，避免两边状态不一致
  • 封装时透传所有未显式定义的props到内部Dropdown组件，不要阻断props传递链路

问题2：multiple属性被忽略，始终为false #

• 解决方案：
  • 不要直接将multiple属性放在Field组件的根属性上，要放到componentProps字段中传递，避免被Field的默认属性过滤逻辑丢弃
  • 自定义组件内显式声明接收multiple属性，不要依赖隐式透传
  • 字段初始化时将对应表单值的默认值设为空数组，避免类型不匹配导致multiple属性被强制重置为false

问题3：向导式表单回退后Dropdown选中值丢失 #

• 解决方案：
  • 整个向导流程共用同一个react-final-form的Form实例，步骤切换时仅替换子步骤渲染内容，不要销毁Form组件，所有字段值统一存在Form全局状态中
  • 若业务逻辑必须销毁Form实例，步骤切换前将当前所有表单值存储到上层公共state中，重新进入对应步骤时将存储的值作为Form的initialValues传入
  • 给Dropdown组件同时绑定value与defaultValue属性，确保组件重挂载时能正确读取初始值完成回填

内容的提问来源于stack exchange，提问作者Rob de V