Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
在React中实现级联选择器：动态更新第二个Select选项的教程_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

在React中实现级联选择器：动态更新第二个Select选项的教程

程序猿 • • 用户投稿

在React中实现级联选择器：动态更新第二个Select选项的教程

本教程将指导您如何在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  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 (    
      
        
                      {/* ... 其他 JSX 结构 ... */}            
              
                {/* ... 其他 input 字段 ... */}              
              
                
                                     {                      setType(e.target.value); // 更新类型                      setTable_id(0); // **重要：重置父菜单的选中值**                    }}                  >                    --Chọn loại menu-- {/* 初始选项，设置value="" */}                    Menu chính                    Menu footer                                  
                
                                     setTable_id(e.target.value)}                    // 当加载中或未选择类型时禁用第二个select                    disabled={isLoadingTableOptions || !type}                  >                    --Chọn menu cha-- {/* 初始选项，当未选择类型时禁用 */}                    Không có cha                    {isLoadingTableOptions ? (                      加载中... // 加载指示器                    ) : (                      dependentTableOptions.map((menu) => (                                                  {menu.name}                                              ))                    )}                                  
                {/* ... 其他 input 字段 ... */}              
            
                  
      
    
  );}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  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 (    
      
        
                      
              THÊM MENU              
                                                    Go back                                              
            
            
              
                
                                    <input                    name="name"

以上就是在React中实现级联选择器：动态更新第二个Select选项的教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532592.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
使用 JavaScript 提取动态生成网页内容
上一篇 2025年12月20日 23:51:17
Node.js服务端JavaScript性能优化策略
下一篇 2025年12月20日 23:51:35

相关推荐

发表回复

登录后才能评论
关注微信