如何在redux-forms/final-forms中实现国家地区联动下拉选项动态渲染

实现方案 #

redux-form会自动将所有表单字段值存储在redux store中，无需组件级state即可实现联动，步骤如下：

1. 引入redux-form提供的formValueSelector工具，该方法可以从store中提取指定表单的字段值
2. 通过mapStateToProps获取当前选中的国家值，根据该值过滤得到对应国家的地区列表
3. 将过滤后的地区列表传递给Region字段的data属性即可实现动态渲染

代码示例

首先导入依赖并关联store：

import { formValueSelector, reduxForm } from 'redux-form';
import { connect } from 'react-redux';

// 替换为你实际定义的表单name
const FORM_NAME = 'yourFormName';
const selector = formValueSelector(FORM_NAME);

const mapStateToProps = (state) => {
  // 获取当前选中的国家值
  const selectedCountry = selector(state, 'country');
  // 过滤对应国家的地区，此处根据你的实际数据结构调整过滤逻辑
  const filteredRegions = selectedCountry 
    ? regions.filter(item => item.belongCountry === selectedCountry) 
    : [];
  return {
    filteredRegions
  };
};

// 表单组件的导出写法示例
export default connect(mapStateToProps)(
  reduxForm({ form: FORM_NAME })(YourFormComponent)
);

然后修改字段部分的代码，将Region字段的data替换为过滤后的列表：

<Field
  component={this.renderDropDown}
  data={countries}
  name="country"
  label="Country"
/>

<Field
  component={this.renderDropDown}
  data={this.props.filteredRegions}
  name="Region"
  label="Region"
/>

补充说明

如果你的地区数据需要异步从接口获取，只需在componentDidUpdate中监听props.selectedCountry的变化，触发接口请求将返回的地区列表存入redux，再传递给Region字段即可，全程无需使用组件内部state。

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