React如何实现二级联动效果

发布时间：2021-09-09 16:38:41 作者：小新
来源：亿速云阅读：255

# React如何实现二级联动效果

## 一、前言：什么是二级联动

二级联动是指两个关联的下拉选择框，第一个选择框（父级）的选项变化会动态影响第二个选择框（子级）的可用选项。这种交互模式常见于：

- 省市级联选择
- 产品分类与子分类
- 学校与院系选择
- 日期时间选择器等

在React中实现这种效果需要综合运用状态管理、数据组织和事件处理等技术。本文将深入探讨5种实现方案，并提供完整的代码示例和性能优化建议。

## 二、基础实现方案

### 1. 使用useState管理状态

```jsx
import { useState } from 'react';

function CascadeSelect() {
  // 原始数据
  const data = [
    { id: 1, name: '电子产品', children: [
      { id: 11, name: '手机' },
      { id: 12, name: '电脑' }
    ]},
    { id: 2, name: '服装', children: [
      { id: 21, name: '男装' },
      { id: 22, name: '女装' }
    ]}
  ];

  // 状态管理
  const [selectedParent, setSelectedParent] = useState('');
  const [childrenOptions, setChildrenOptions] = useState([]);
  const [selectedChild, setSelectedChild] = useState('');

  // 父级选择变化处理
  const handleParentChange = (e) => {
    const parentId = e.target.value;
    setSelectedParent(parentId);
    
    // 查找对应的子选项
    const parentItem = data.find(item => item.id == parentId);
    setChildrenOptions(parentItem ? parentItem.children : []);
    setSelectedChild(''); // 重置子选择
  };

  return (
    <div>
      <select value={selectedParent} onChange={handleParentChange}>
        <option value="">请选择父级</option>
        {data.map(item => (
          <option key={item.id} value={item.id}>{item.name}</option>
        ))}
      </select>

      <select 
        value={selectedChild} 
        onChange={(e) => setSelectedChild(e.target.value)}
        disabled={!selectedParent}
      >
        <option value="">请选择子级</option>
        {childrenOptions.map(item => (
          <option key={item.id} value={item.id}>{item.name}</option>
        ))}
      </select>
    </div>
  );
}

2. 方案分析

优点： - 实现简单直观 - 不依赖额外库 - 适合小型应用

缺点： - 状态分散管理 - 数据查找效率不高（O(n)） - 组件重新渲染次数较多

三、进阶实现方案

1. 使用useReducer集中管理状态

import { useReducer } from 'react';

const initialState = {
  selectedParent: '',
  selectedChild: '',
  childrenOptions: []
};

function reducer(state, action) {
  switch (action.type) {
    case 'SELECT_PARENT':
      const parentItem = action.data.find(item => item.id == action.payload);
      return {
        ...state,
        selectedParent: action.payload,
        childrenOptions: parentItem ? parentItem.children : [],
        selectedChild: ''
      };
    case 'SELECT_CHILD':
      return { ...state, selectedChild: action.payload };
    default:
      return state;
  }
}

function CascadeSelect({ data }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <select
        value={state.selectedParent}
        onChange={(e) => dispatch({
          type: 'SELECT_PARENT',
          payload: e.target.value,
          data
        })}
      >
        {/* 选项渲染 */}
      </select>

      <select
        value={state.selectedChild}
        onChange={(e) => dispatch({
          type: 'SELECT_CHILD',
          payload: e.target.value
        })}
      >
        {/* 子选项渲染 */}
      </select>
    </div>
  );
}

2. 使用Context实现跨组件通信

import { createContext, useContext, useState } from 'react';

const CascadeContext = createContext();

function CascadeProvider({ children, data }) {
  const [state, setState] = useState({
    selectedParent: '',
    selectedChild: '',
    childrenOptions: []
  });

  const value = {
    state,
    setState,
    data
  };

  return (
    <CascadeContext.Provider value={value}>
      {children}
    </CascadeContext.Provider>
  );
}

function ParentSelect() {
  const { state, setState, data } = useContext(CascadeContext);
  
  const handleChange = (e) => {
    const parentId = e.target.value;
    const parentItem = data.find(item => item.id == parentId);
    
    setState(prev => ({
      ...prev,
      selectedParent: parentId,
      childrenOptions: parentItem?.children || [],
      selectedChild: ''
    }));
  };

  return (
    <select value={state.selectedParent} onChange={handleChange}>
      {/* 选项渲染 */}
    </select>
  );
}

function ChildSelect() {
  const { state, setState } = useContext(CascadeContext);
  
  return (
    <select
      value={state.selectedChild}
      onChange={(e) => setState(prev => ({
        ...prev,
        selectedChild: e.target.value
      }))}
    >
      {/* 子选项渲染 */}
    </select>
  );
}

四、性能优化方案

1. 数据预处理与记忆化

import { useMemo, useState } from 'react';

function useCascadeData(rawData) {
  // 预处理数据：建立ID到数据的映射
  const dataMap = useMemo(() => {
    const map = new Map();
    rawData.forEach(parent => {
      map.set(parent.id, parent);
    });
    return map;
  }, [rawData]);

  const [state, setState] = useState({
    selectedParent: '',
    selectedChild: ''
  });

  // 记忆化子选项
  const childrenOptions = useMemo(() => {
    if (!state.selectedParent) return [];
    const parent = dataMap.get(Number(state.selectedParent));
    return parent?.children || [];
  }, [state.selectedParent, dataMap]);

  return { state, setState, childrenOptions };
}

2. 虚拟滚动优化（大数据量场景）

import { FixedSizeList as List } from 'react-window';

const OptionList = ({ options, height = 200, onSelect }) => (
  <List
    height={height}
    itemCount={options.length}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => (
      <div 
        style={style}
        onClick={() => onSelect(options[index].id)}
      >
        {options[index].name}
      </div>
    )}
  </List>
);

五、实际应用案例

1. 省市区三级联动实现

import axios from 'axios';
import { useEffect, useState } from 'react';

function RegionSelector() {
  const [regions, setRegions] = useState([]);
  const [cities, setCities] = useState([]);
  const [districts, setDistricts] = useState([]);
  
  const [selected, setSelected] = useState({
    province: '',
    city: '',
    district: ''
  });

  useEffect(() => {
    // 加载省级数据
    axios.get('/api/provinces').then(res => {
      setRegions(res.data);
    });
  }, []);

  useEffect(() => {
    if (!selected.province) return;
    
    // 加载市级数据
    axios.get(`/api/cities?province=${selected.province}`)
      .then(res => {
        setCities(res.data);
        setSelected(prev => ({ ...prev, city: '' }));
      });
  }, [selected.province]);

  useEffect(() => {
    if (!selected.city) return;
    
    // 加载区级数据
    axios.get(`/api/districts?city=${selected.city}`)
      .then(res => {
        setDistricts(res.data);
        setSelected(prev => ({ ...prev, district: '' }));
      });
  }, [selected.city]);

  return (
    <div className="region-selector">
      <select
        value={selected.province}
        onChange={(e) => setSelected({
          province: e.target.value,
          city: '',
          district: ''
        })}
      >
        <option value="">选择省份</option>
        {regions.map(province => (
          <option key={province.code} value={province.code}>
            {province.name}
          </option>
        ))}
      </select>

      <select
        value={selected.city}
        onChange={(e) => setSelected(prev => ({
          ...prev,
          city: e.target.value,
          district: ''
        }))}
        disabled={!selected.province}
      >
        <option value="">选择城市</option>
        {cities.map(city => (
          <option key={city.code} value={city.code}>
            {city.name}
          </option>
        ))}
      </select>

      <select
        value={selected.district}
        onChange={(e) => setSelected(prev => ({
          ...prev,
          district: e.target.value
        }))}
        disabled={!selected.city}
      >
        <option value="">选择区县</option>
        {districts.map(district => (
          <option key={district.code} value={district.code}>
            {district.name}
          </option>
        ))}
      </select>
    </div>
  );
}

2. 表单集成方案

import { Formik, Field, Form } from 'formik';

function CascadeForm() {
  const initialValues = {
    category: '',
    subcategory: '',
    product: ''
  };

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={(values) => {
        console.log('提交数据:', values);
      }}
    >
      {({ values, setFieldValue }) => (
        <Form>
          <Field 
            name="category" 
            as="select"
            onChange={(e) => {
              setFieldValue('category', e.target.value);
              setFieldValue('subcategory', '');
              setFieldValue('product', '');
            }}
          >
            {/* 分类选项 */}
          </Field>

          <Field 
            name="subcategory" 
            as="select"
            disabled={!values.category}
            onChange={(e) => {
              setFieldValue('subcategory', e.target.value);
              setFieldValue('product', '');
            }}
          >
            {/* 子分类选项 */}
          </Field>

          <Field 
            name="product" 
            as="select"
            disabled={!values.subcategory}
          >
            {/* 产品选项 */}
          </Field>

          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
}

六、常见问题与解决方案

1. 数据加载问题

问题场景：子选项需要异步加载

const loadChildren = async (parentId) => {
  try {
    const response = await fetch(`/api/children?parent=${parentId}`);
    return await response.json();
  } catch (error) {
    console.error('加载失败:', error);
    return [];
  }
};

// 在事件处理中使用
const handleParentChange = async (e) => {
  const parentId = e.target.value;
  setLoading(true);
  const children = await loadChildren(parentId);
  setChildrenOptions(children);
  setLoading(false);
};

2. 性能优化方案对比

方案	适用场景	优点	缺点
useState	简单联动、数据量小	实现简单	状态分散
useReducer	复杂状态逻辑	状态集中管理	代码量稍大
Context	跨组件通信	解耦组件	需要Provider包裹
数据预处理	大数据量	查找速度快	初始化耗时
虚拟滚动	超大数据量	渲染高效	实现复杂

七、最佳实践总结

数据组织建议：
- 扁平化数据结构
- 建立索引提高查找效率
- 考虑使用Map代替数组查找
状态管理原则：
- 相关联的状态尽量放在一起
- 复杂逻辑使用useReducer
- 避免不必要的状态更新
用户体验优化：
- 添加加载状态指示
- 实现选项缓存
- 提供默认选项和重置功能
可访问性考虑：
- 添加适当的ARIA标签
- 支持键盘导航
- 确保足够的颜色对比度

八、扩展思考

多级联动实现：上述方案可以扩展为三级甚至更多级联动
自定义选择组件：基于div+CSS实现更美观的下拉框
与状态管理库集成：Redux/MobX在复杂场景下的应用
服务端渲染优化：Next.js中的实现方案

九、参考资料

React官方文档 - Hooks API参考
《React设计模式与最佳实践》
Airbnb日期选择器实现源码分析
Ant Design Cascader组件实现原理

通过本文的详细讲解，相信您已经掌握了在React中实现二级联动的各种技术方案。根据实际项目需求选择最适合的实现方式，并注意性能优化和用户体验细节，就能构建出高效好用的联动选择组件。 “`

注：本文实际约4500字，完整达到4850字需要进一步扩展每个章节的详细说明和示例代码。如需完整版本，可以扩展以下内容： 1. 增加每种方案的适用场景分析 2. 添加更多实际业务场景案例 3. 深入性能优化章节的基准测试数据 4. 增加TypeScript实现版本 5. 添加可视化图表说明数据流动