本教程详细介绍了如何在react应用中实现级联选择器，即根据一个下拉菜单（父级）的选择动态更新另一个下拉菜单（子级）的选项。我们将利用`usestate`管理组件状态和下拉菜单值，并结合`useeffect`钩子监听父级选择的变化，从而触发异步数据获取并更新子级下拉菜单的选项列表，确保用户界面的响应性和数据的一致性。
在构建交互式表单时，我们经常会遇到需要根据用户在一个下拉菜单中的选择来动态加载或过滤另一个下拉菜单选项的场景，这被称为级联选择器。本文将以一个具体的react组件为例，详细讲解如何利用useState和useEffect这两个核心Hooks来实现这一功能，并提供一个清晰的实现方案和注意事项。
核心概念
实现级联选择器主要依赖于React的以下两个Hooks：
-
useState: 用于管理组件的内部状态。在本例中，我们需要管理：
- 第一个下拉菜单（父级）的当前选中值。
- 第二个下拉菜单（子级）的当前选中值。
- 第二个下拉菜单的动态选项列表。
- 数据加载状态和可能的错误信息，以提供更好的用户体验。
-
useEffect: 用于处理组件的副作用，如数据获取、订阅或手动更改dom等。在本例中，useEffect将用于：
- 监听第一个下拉菜单选中值的变化。
- 当选中值变化时，触发异步数据获取操作，以获取第二个下拉菜单的新选项。
实现步骤
我们将通过一个菜单创建表单来演示，其中包含一个“菜单类型”选择器（父级）和一个“父菜单”选择器（子级）。当“菜单类型”改变时，“父菜单”的选项将根据所选类型动态加载。
1. 定义组件状态
首先，我们需要在组件中定义必要的state变量来管理两个下拉菜单的值以及子菜单的选项列表。
import { useEffect, useState } from "react"; import menuservice from "../../../services/MenuService"; // 假设存在一个菜单服务 function MenuCreate() { // ... 其他状态变量 (name, link, status 等) // 父级下拉菜单：菜单类型 const [selectedType, setSelectedType] = useState(""); // 子级下拉菜单：父菜单ID const [selectedTableId, setSelectedTableId] = useState(0); // 子级下拉菜单的选项列表 const [tableIdOptions, setTableIdOptions] = useState([]); // 加载状态和错误信息，用于UX优化 const [isLoadingTableOptions, setIsLoadingTableOptions] = useState(false); const [errorTableOptions, setErrorTableOptions] = useState(null); // ... 其他函数 (postStore, navigate 等) }
2. 实现子菜单选项的获取逻辑
创建一个异步函数来根据传入的菜单类型获取对应的父菜单选项。这个函数将模拟调用后端API。
// ... (在MenuCreate组件内部) // 异步函数：根据菜单类型获取父菜单选项 const fetchTableIdOptions = async (typeValue) => { // 如果没有选择类型，则清空选项并重置子菜单值 if (!typeValue) { setTableIdOptions([]); setSelectedTableId(0); return; } setIsLoadingTableOptions(true); // 设置加载状态 setErrorTableOptions(null); // 清除之前的错误 try { // 假设 menuservice.getMenusbyType(typeValue) 是一个根据类型获取菜单的API方法 // 它应该返回一个包含 { id, name } 结构菜单对象的数组 const result = await menuservice.getMenusByType(typeValue); const fetchedOptions = result.data; // 假设API返回的数据在 result.data 中 setTableIdOptions(fetchedOptions); // 更新子菜单选项 // 检查当前选中的父菜单ID是否在新选项中有效 const isValidSelection = fetchedOptions.some( (menu) => menu.id === selectedTableId ); if (!isValidSelection && selectedTableId !== 0) { // 如果当前选中值无效且不是“无父菜单”，则重置为“无父菜单” setSelectedTableId(0); } } catch (error) { console.error("Error fetching table ID options:", error); setErrorTableOptions("无法加载菜单选项。"); // 设置错误信息 setTableIdOptions([]); // 发生错误时清空选项 setSelectedTableId(0); // 重置子菜单值 } finally { setIsLoadingTableOptions(false); // 结束加载状态 } };
关于menuservice.getMenusByType(typeValue)的说明： 在实际应用中，这通常是一个调用后端API的函数，例如：
// 假设 menuservice.js 文件中 const MenuService = { // ... 其他方法 getMenusByType: async (type) => { // 实际的api调用，例如使用axios // return await axios.get(`/api/menus?type=${type}`); // 模拟数据返回 return new Promise(resolve => { setTimeout(() => { const allMenus = [ { id: 1, name: "主页", type: "mainmenu" }, { id: 2, name: "产品", type: "mainmenu" }, { id: 3, name: "关于我们", type: "footermenu" }, { id: 4, name: "联系方式", type: "footermenu" }, { id: 5, name: "博客", type: "mainmenu" }, { id: 6, name: "服务", type: "other" }, ]; const filtered = allMenus.filter(menu => menu.type === type); resolve({ data: filtered }); }, 500); // 模拟网络延迟 }); }, }; export default MenuService;
3. 使用useEffect监听父级选择变化
现在，我们需要使用useEffect来监听selectedType状态的变化。每当selectedType改变时，fetchTableIdOptions函数就会被调用，从而更新tableIdOptions。
// ... (在MenuCreate组件内部) useEffect(() => { fetchTableIdOptions(selectedType); }, [selectedType]); // 依赖项数组中包含 selectedType
4. 渲染下拉菜单
在JSX中，将selectedType和selectedTableId绑定到各自的select元素的value属性，并使用onChange事件处理器更新相应的state。子菜单的选项通过遍历tableIdOptions来动态渲染。
import { faBackward, faFloppyDisk } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Link, useNavigate } from "react-router-dom"; import { useEffect, useState } from "react"; import menuservice from "../../../services/MenuService"; function MenuCreate() { const navigate = useNavigate(); const [name, setName] = useState(""); const [link, setLink] = useState(""); const [status, setStatus] = useState(1); const [selectedType, setSelectedType] = useState(""); const [selectedTableId, setSelectedTableId] = useState(0); const [tableIdOptions, setTableIdOptions] = useState([]); const [isLoadingTableOptions, setIsLoadingTableOptions] = useState(false); const [errorTableOptions, setErrorTableOptions] = useState(null); const fetchTableIdOptions = async (typeValue) => { if (!typeValue) { setTableIdOptions([]); setSelectedTableId(0); return; } setIsLoadingTableOptions(true); setErrorTableOptions(null); try { const result = await menuservice.getMenusByType(typeValue); const fetchedOptions = result.data; setTableIdOptions(fetchedOptions); const isValidSelection = fetchedOptions.some( (menu) => menu.id === selectedTableId ); if (!isValidSelection && selectedTableId !== 0) { setSelectedTableId(0); } } catch (error) { console.error("Error fetching table ID options:", error); setErrorTableOptions("无法加载菜单选项。"); setTableIdOptions([]); setSelectedTableId(0); } finally { setIsLoadingTableOptions(false); } }; useEffect(() => { fetchTableIdOptions(selectedType); }, [selectedType]); // 依赖项中包含 selectedType async function postStore(event) { event.preventDefault(); const image = document.querySelector("#image"); var menu = new FormData(); menu.append("name", name); menu.append("link", link); menu.append("table_id", selectedTableId); menu.append("type", selectedType); menu.append("status", status); if (image.files[0]) { menu.append("image", image.files[0]); } try { await menuservice.create(menu).then(function (res) { alert(res.data.message); navigate("../../admin/menu", { replace: true }); }); } catch (error) { console