在前端开发中，多级联动选择器是一个常见的需求，比如省市区三级联动选择器。本文将介绍如何使用 React 实现一个多级联动选择器，并提供示例代码和指导意义。
1. 实现思路
实现一个多级联动选择器，需要考虑以下几个方面：
- 数据源：需要有一份数据源，用于渲染选择器的选项。
- 状态管理：需要管理选择器的状态，比如当前选中的值、每个级别的选项列表等。
- 事件处理：需要处理用户选择每个级别的选项时触发的事件。
- 渲染：需要将状态中的数据渲染成选择器。
基于以上思路，我们可以设计一个多级联动选择器的组件结构：
<MultiSelector
dataSource={dataSource}
onChange={handleChange}
/>其中，dataSource 是数据源，onChange 是用户选择选项时的回调函数。MultiSelector 组件可以包含多个 Selector 组件，每个 Selector 组件对应一个级别的选择器。每个 Selector 组件需要维护以下状态：
options：该级别的选项列表。value：该级别当前选中的值。
当用户选择某个选项时，需要更新该级别的 value，并触发 onChange 回调函数，同时更新下一级选择器的 options。
2. 示例代码
下面是一个简单的多级联动选择器示例代码：
// www.javascriptcn.com code example
import React, { useState, useEffect } from 'react';
function MultiSelector({ dataSource, onChange }) {
const [values, setValues] = useState([]);
const [options, setOptions] = useState([]);
useEffect(() => {
// 初始化第一个选择器的选项列表
setOptions(dataSource);
}, [dataSource]);
const handleChange = (index, value) => {
// 更新当前选择器的选中值
const newValues = [...values];
newValues[index] = value;
setValues(newValues);
// 更新下一级选择器的选项列表
if (index < dataSource.length - 1) {
const nextOptions = dataSource[index + 1][value];
setOptions(prevOptions => {
const newOptions = [...prevOptions];
newOptions[index + 1] = nextOptions;
return newOptions;
});
}
// 触发 onChange 回调函数
onChange(newValues);
};
return (
<div>
{options.map((option, index) => (
<Selector
key={index}
options={option}
value={values[index]}
onChange={value => handleChange(index, value)}
/>
))}
</div>
);
}
function Selector({ options, value, onChange }) {
return (
<select value={value} onChange={e => onChange(e.target.value)}>
{options.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
);
}该示例代码中，MultiSelector 组件维护了 values 和 options 状态变量，其中 values 是所有选择器当前选中的值的数组，options 是所有选择器当前可选项的数组。MultiSelector 组件通过 useEffect 钩子函数初始化第一个选择器的选项列表，并通过 handleChange 函数处理用户选择选项时的事件。Selector 组件是一个简单的 select 元素，当用户选择某个选项时，会触发 onChange 回调函数。
使用该多级联动选择器，只需要传入一个数据源和一个回调函数即可：
// www.javascriptcn.com code example
const dataSource = [
{
label: '省',
value: {
'北京': ['东城区', '西城区', '朝阳区', '海淀区'],
'上海': ['黄浦区', '徐汇区', '长宁区', '静安区'],
'广东': ['广州市', '深圳市', '珠海市'],
},
},
{
label: '市',
value: {
'东城区': ['东城区1', '东城区2'],
'西城区': ['西城区1', '西城区2'],
'朝阳区': ['朝阳区1', '朝阳区2'],
'海淀区': ['海淀区1', '海淀区2'],
'黄浦区': ['黄浦区1', '黄浦区2'],
'徐汇区': ['徐汇区1', '徐汇区2'],
'长宁区': ['长宁区1', '长宁区2'],
'静安区': ['静安区1', '静安区2'],
'广州市': ['广州市1', '广州市2'],
'深圳市': ['深圳市1', '深圳市2'],
'珠海市': ['珠海市1', '珠海市2'],
},
},
{
label: '区',
value: {
'东城区1': ['东城区1-1', '东城区1-2'],
'东城区2': ['东城区2-1', '东城区2-2'],
'西城区1': ['西城区1-1', '西城区1-2'],
'西城区2': ['西城区2-1', '西城区2-2'],
'朝阳区1': ['朝阳区1-1', '朝阳区1-2'],
'朝阳区2': ['朝阳区2-1', '朝阳区2-2'],
'海淀区1': ['海淀区1-1', '海淀区1-2'],
'海淀区2': ['海淀区2-1', '海淀区2-2'],
'黄浦区1': ['黄浦区1-1', '黄浦区1-2'],
'黄浦区2': ['黄浦区2-1', '黄浦区2-2'],
'徐汇区1': ['徐汇区1-1', '徐汇区1-2'],
'徐汇区2': ['徐汇区2-1', '徐汇区2-2'],
'长宁区1': ['长宁区1-1', '长宁区1-2'],
'长宁区2': ['长宁区2-1', '长宁区2-2'],
'静安区1': ['静安区1-1', '静安区1-2'],
'静安区2': ['静安区2-1', '静安区2-2'],
'广州市1': ['广州市1-1', '广州市1-2'],
'广州市2': ['广州市2-1', '广州市2-2'],
'深圳市1': ['深圳市1-1', '深圳市1-2'],
'深圳市2': ['深圳市2-1', '深圳市2-2'],
'珠海市1': ['珠海市1-1', '珠海市1-2'],
'珠海市2': ['珠海市2-1', '珠海市2-2'],
},
},
];
function handleSelectorChange(values) {
console.log('选择了：', values);
}
function App() {
return (
<MultiSelector dataSource={dataSource} onChange={handleSelectorChange} />
);
}3. 指导意义
本文介绍了如何使用 React 实现一个多级联动选择器，包括实现思路和示例代码。通过学习本文，你可以了解到 React 组件的状态管理和事件处理，以及如何使用 React 实现一个常见的前端组件。
在实际开发中，多级联动选择器是一个非常常见的需求，比如省市区三级联动选择器、日期选择器等。通过学习本文，你可以掌握如何使用 React 实现这些常见的前端组件，提高你的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d50e4aa941bf713495e88e