本教程将指导您如何在react应用中实现级联选择器功能。当一个`select`（如类型选择）的值发生变化时，另一个`select`（如父菜单选择）的选项列表将根据新值动态更新。我们将利用react的`usestate`管理组件状态，并通过`useeffect`钩子在依赖项变化时触发数据获取，从而实现高效且响应式的用户界面交互。
在现代Web应用中，用户界面的交互性至关重要。级联选择器（Cas#%#$#%@%@%$#%$#%#%#$%@_b5fde512c76571c8afd6a6089eaaf42aing Selects），即一个下拉列表的选择会影响另一个下拉列表的选项，是一种常见的交互模式。例如，在选择菜单类型后，其对应的父菜单选项应随之动态加载。本教程将详细介绍如何在React中实现这一功能，包括状态管理、数据获取和UI渲染。
核心概念
实现级联选择器主要依赖于React的以下几个核心钩子：
- useState: 用于管理组件的本地状态，包括第一个select的选中值、第二个select的选中值，以及第二个select的动态选项列表。
- useEffect: 用于处理副作用，例如在组件挂载后或特定状态（如第一个select的选中值）变化时触发数据获取。
- 事件处理函数: 用于捕获select的onChange事件，更新相应的状态。
实现步骤
我们将基于提供的代码示例进行改造，实现当“选择类型菜单” (type) 变化时，“选择菜单父级” (table_id) 的选项随之更新。
1. 状态管理
首先，我们需要定义或调整相关的状态变量。
- type: 存储第一个select（类型选择）的当前选中值。
- table_id: 存储第二个select（父菜单选择）的当前选中值。
- dependentTableOptions: 存储根据type动态加载的父菜单选项列表。
- isLoadingTableOptions: 一个布尔值，表示父菜单选项是否正在加载中，用于优化用户体验。
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 [table_id, setTable_id] = useState(0); // 第二个select的选中值
const [type, setType] = useState(""); // 第一个select的选中值
const [status, setStatus] = useState(1);
// 新增状态：存储动态加载的父菜单选项
const [dependentTableOptions, setDependentTableOptions] = useState([]);
// 新增状态：指示父菜单选项是否正在加载
const [isLoadingTableOptions, setIsLoadingTableOptions] = useState(false);
// ... (postStore function and other existing code)2. 数据获取逻辑
创建一个异步函数来模拟或实际执行API调用，根据传入的selectedType获取相应的父菜单选项。
// ... (之前的状态定义)
// 模拟数据服务，根据类型返回不同的菜单
// 在实际应用中，这里会是一个真正的API调用，例如 menuservice.getMenusByType(selectedType)
const fetchTableOptionsByType = async (selectedType) => {
setIsLoadingTableOptions(true); // 开始加载
try {
// 假设 menuservice.getAll() 返回所有菜单数据
// 实际场景中，您可能会调用一个带参数的API，例如 menuservice.getDependentMenus(selectedType)
const allMenusResult = await menuservice.getAll();
const allMenus = allMenusResult.data;
let filteredOptions = [];
if (selectedType === "mainmenu") {
// 示例过滤逻辑：如果类型是主菜单，只显示ID小于5的菜单
filteredOptions = allMenus.filter(menu => menu.id < 5);
} else if (selectedType === "footermenu") {
// 示例过滤逻辑：如果类型是页脚菜单，只显示ID大于等于5的菜单
filteredOptions = allMenus.filter(menu => menu.id >= 5);
} else {
// 如果没有选择特定类型，或者类型不匹配，可以显示所有或清空
filteredOptions = []; // 默认清空，或根据需求显示全部
}
setDependentTableOptions(filteredOptions);
} catch (error) {
console.error("获取依赖菜单选项失败:", error);
setDependentTableOptions([]); // 错误时清空选项
} finally {
setIsLoadingTableOptions(false); // 结束加载
}
};
// ... (postStore function and other existing code)3. 使用 useEffect 监听 type 变化
使用 useEffect 钩子，将 type 作为其依赖项。当 type 的值发生变化时，useEffect 会重新执行，从而调用 fetchTableOptionsByType 函数来获取新的选项。
// ... (之前的代码)
// useEffect 钩子，监听 'type' 状态的变化
useEffect(() => {
if (type) { // 只有当 'type' 有值时才触发数据获取
fetchTableOptionsByType(type);
} else {
setDependentTableOptions([]); // 如果没有选择类型，则清空父菜单选项
setTable_id(0); // 同时重置父菜单的选中值
}
}, [type]); // 将 'type' 加入依赖数组，当 'type' 变化时重新运行此 effect
// ... (postStore function and other existing code)4. 更新 select 元素的 onChange 处理
修改第一个 select（类型选择）的 onChange 事件处理器。当其值改变时，不仅要更新 type 状态，还要重置第二个 select（父菜单选择）的 table_id 状态，以避免出现不一致的选中值。
// ... (之前的代码)
return (
<section className="mainList">
<div className="wrapper">
<div className="card1">
<form method="post" onSubmit={postStore}>
{/* ... 其他 JSX 结构 ... */}
<div className="form-container grid -bottom-3 ">
<div className="grid__item large--three-quarters">
{/* ... 其他 input 字段 ... */}
</div>
<div className="grid__item large--one-quarter">
<fieldset className="input-container">
<label htmlFor="type">Chọn loại menu</label>
<select
name="type"
className="input"
value={type}
onChange={(e) => {
setType(e.target.value); // 更新类型
setTable_id(0); // **重要：重置父菜单的选中值**
}}
>
<option value="" disabled>--Chọn loại menu--</option> {/* 初始选项，设置value="" */}
<option value="mainmenu">Menu chính</option>
<option value="footermenu">Menu footer</option>
</select>
</fieldset>
<fieldset className="input-container">
<label htmlFor="table_id">Chọn menu cha</label>
<select
name="table_id"
className="input"
value={table_id}
onChange={(e) => setTable_id(e.target.value)}
// 当加载中或未选择类型时禁用第二个select
disabled={isLoadingTableOptions || !type}
>
<option value="0" disabled={!type}>--Chọn menu cha--</option> {/* 初始选项，当未选择类型时禁用 */}
<option value="0">Không có cha</option>
{isLoadingTableOptions ? (
<option disabled>加载中...</option> // 加载指示器
) : (
dependentTableOptions.map((menu) => (
<option key={menu.id} value={menu.id}>
{menu.name}
</option>
))
)}
</select>
</fieldset>
{/* ... 其他 input 字段 ... */}
</div>
</div>
</form>
</div>
</div>
</section>
);
}
export default MenuCreate;完整示例代码
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 [table_id, setTable_id] = useState(0); // 第二个select的选中值
const [type, setType] = useState(""); // 第一个select的选中值
const [status, setStatus] = useState(1);
// 新增状态：存储动态加载的父菜单选项
const [dependentTableOptions, setDependentTableOptions] = useState([]);
// 新增状态：指示父菜单选项是否正在加载
const [isLoadingTableOptions, setIsLoadingTableOptions] = useState(false);
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", table_id);
menu.append("type", type);
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.error(error.response.data);
alert("创建菜单失败: " + (error.response?.data?.message || error.message));
}
}
// 模拟数据服务，根据类型返回不同的菜单
const fetchTableOptionsByType = async (selectedType) => {
setIsLoadingTableOptions(true); // 开始加载
try {
// 在实际应用中，这里会是一个真正的API调用，例如 menuservice.getMenusByType(selectedType)
// 为演示目的，我们假设 menuservice.getAll() 返回所有菜单数据，然后进行过滤
const allMenusResult = await menuservice.getAll();
const allMenus = allMenusResult.data;
let filteredOptions = [];
if (selectedType === "mainmenu") {
// 示例过滤逻辑：如果类型是主菜单，只显示ID小于5的菜单
filteredOptions = allMenus.filter(menu => menu.id < 5);
} else if (selectedType === "footermenu") {
// 示例过滤逻辑：如果类型是页脚菜单，只显示ID大于等于5的菜单
filteredOptions = allMenus.filter(menu => menu.id >= 5);
} else {
// 如果没有选择特定类型，或者类型不匹配，可以显示所有或清空
filteredOptions = []; // 默认清空，或根据需求显示全部
}
setDependentTableOptions(filteredOptions);
} catch (error) {
console.error("获取依赖菜单选项失败:", error);
setDependentTableOptions([]); // 错误时清空选项
} finally {
setIsLoadingTableOptions(false); // 结束加载
}
};
// useEffect 钩子，监听 'type' 状态的变化
useEffect(() => {
if (type) { // 只有当 'type' 有值时才触发数据获取
fetchTableOptionsByType(type);
} else {
setDependentTableOptions([]); // 如果没有选择类型，则清空父菜单选项
setTable_id(0); // 同时重置父菜单的选中值
}
}, [type]); // 将 'type' 加入依赖数组，当 'type' 变化时重新运行此 effect
// 原有的 menus 状态和 useEffect 如果不再用于 table_id 的动态选项，可以移除或调整
// const [menus, setMenus] = useState([]);
// useEffect(function () {
// (async function () {
// await menuservice.getAll().then(function (result) {
// setMenus(result.data);
// });
// })();
// }, []);
return (
<section className="mainList">
<div className="wrapper">
<div className="card1">
<form method="post" onSubmit={postStore}>
<div className="card-header">
<strong className="title1">THÊM MENU</strong>
<div className="button">
<Link to="/admin/menu" className="backward">
<FontAwesomeIcon icon={faBackward} />
Go back
</Link>
<button type="submit" className="save">
<FontAwesomeIcon icon={faFloppyDisk} />
Save
</button>
</div>
</div>
<div className="form-container grid -bottom-3 ">
<div className="grid__item large--three-quarters">
<fieldset className="input-container">
<label htmlFor="name">Tên menu</label>
<input
name="name" 
