登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > React级联选择器动态更新教程

React级联选择器动态更新教程

2025-10-28 10:00:37 0浏览 收藏

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《React级联选择器实现教程：动态更新第二个Select选项》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！


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

本教程将指导您如何在React应用中实现级联选择器功能。当一个`select`（如类型选择）的值发生变化时，另一个`select`（如父菜单选择）的选项列表将根据新值动态更新。我们将利用React的`useState`管理组件状态，并通过`useEffect`钩子在依赖项变化时触发数据获取，从而实现高效且响应式的用户界面交互。

在现代Web应用中，用户界面的交互性至关重要。级联选择器（Cascading Selects），即一个下拉列表的选择会影响另一个下拉列表的选项，是一种常见的交互模式。例如，在选择菜单类型后，其对应的父菜单选项应随之动态加载。本教程将详细介绍如何在React中实现这一功能，包括状态管理、数据获取和UI渲染。

核心概念

实现级联选择器主要依赖于React的以下几个核心钩子：

  1. useState: 用于管理组件的本地状态，包括第一个select的选中值、第二个select的选中值，以及第二个select的动态选项列表。
  2. useEffect: 用于处理副作用，例如在组件挂载后或特定状态（如第一个select的选中值）变化时触发数据获取。
  3. 事件处理函数: 用于捕获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 (
    

      

        

          

            {/* ... 其他 JSX 结构 ... */}
            

              

                {/* ... 其他 input 字段 ... */}
              

              

                

                  
                  
                

                

                  
                  
                

                {/* ... 其他 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 < 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 (
    

      

        

          

            

              THÊM MENU
              

                
                  
                  Go back
                
                
              

            

            

              

                

                  
                  
以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。
                

                

                                    

                                

                                        

                        
                            Go语言接口方法详解与应用Go语言接口方法详解与应用                        
                        

                            
上一篇

                            
Go语言接口方法详解与应用

                        

                    

                                        

                        
                            Golang网络连接关闭处理技巧
                        
                        

                            
下一篇

                            
Golang网络连接关闭处理技巧

                        

                    

                                    

            

        

                

            

                

                    查看更多
                    
最新文章

                

            

            
        

    

    

        
        

            

                查看更多
                
课程推荐

            

            
    
                                
  • 
                    
                        前端进阶之JavaScript设计模式
                                            
                    
    
                        
    前端进阶之JavaScript设计模式
    
                        
    
                            设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。                        
    
                        
    543次学习
    
                    
    
                
    • 
                                
  • 
                    
                        GO语言核心编程课程
                                            
                    
    
                        
    GO语言核心编程课程
    
                        
    
                            本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。                        
    
                        
    516次学习
    
                    
    
                
    • 
                                
  • 
                    
                        简单聊聊mysql8与网络通信
                                            
                    
    
                        
    简单聊聊mysql8与网络通信
    
                        
    
                            如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让                        
    
                        
    500次学习
    
                    
    
                
    • 
                                
  • 
                    
                        JavaScript正则表达式基础与实战
                                            
                    
    
                        
    JavaScript正则表达式基础与实战
    
                        
    
                            在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。                        
    
                        
    487次学习
    
                    
    
                
    • 
                                
  • 
                    
                        从零制作响应式网站—Grid布局
                                            
                    
    
                        
    从零制作响应式网站—Grid布局
    
                        
    
                            本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。                        
    
                        
    485次学习
    
                    
    
                
    • 
                            

        

        

        

            查看更多
            
AI推荐

        

        
    
                        
  • 
                
                    ljg-skills - 
                
                
    
                    
    ljg-skills
    
                    
    
                        ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。                    
    
                    
    3356次使用
    
                
    
            
    • 
                        
  • 
                
                    MELO音乐 - AI 音乐生成平台，支持多模态创作能力
                
                
    
                    
    MELO音乐
    
                    
    
                        MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！                    
    
                    
    3101次使用
    
                
    
            
    • 
                        
  • 
                
                    UniScribe - AI 免费在线音视频转文字平台
                
                
    
                    
    UniScribe
    
                    
    
                        UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。                    
    
                    
    3060次使用
    
                
    
            
    • 
                        
  • 
                
                    剧云 - 免费 AI 智能中文剧本创作平台
                
                
    
                    
    剧云
    
                    
    
                        剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。                    
    
                    
    3261次使用
    
                
    
            
    • 
                        
  • 
                
                    万象有声 - AI 一站式有声内容创作平台
                
                
    
                    
    万象有声
    
                    
    
                        万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！                    
    
                    
    3217次使用
    
                
    
            
    • 
                    

    

        
        

            

                查看更多
                
相关文章
关于我们 免责声明 意见反馈 联系我们 内容提交 手册
Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！
技术交流群
Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
  • Golang学习网
    关注公众号
    Golang学习网
微信登录更方便
  • 密码登录
  • 注册账号
忘记密码
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码
发送验证码