前端开发实战：菜单点击时如何获取当前选中项信息？含实用代码示例与多框架实现对比

实现目标与核心思路

核心目标

在菜单点击时，系统应返回当前被点击项的关键信息，例如 唯一标识 id、文本标签 label、在菜单中的索引 index，以及可能的自定义字段。这个信息对高亮、路由、以及辅助功能都很重要。

要实现这个目标，首要需要一个稳定的事件入口和数据承载模型。通过 事件委托 的方式监听菜单区域的点击事件，并依赖 dataset 属性来承载项信息，是最简单直接的方案。

同时，设计一个统一的当前选中项对象模型，如 { id, index, label }，可以在不同框架中复用，降低后续迁移成本。这里的重点在于 对比、复用和可维护性。

数据绑定与显示

在实际页面中，往往需要把当前选中项的信息展示到别处，如展示区域、路由参数、或导航状态。为此应确保选中状态的渲染是受控的，使用 显式状态更新，并在每次点击后立即同步到 UI。

通过搭配一个小型的显示区域，可以直观地看到被点击项的 id、index、label 等信息，帮助调试和交互设计。

纯原生 JavaScript 实现

核心实现要点

在不依赖框架的情况下，直接操作 DOM，使用事件委托来捕获点击，获取目标项的 data-id、data-index 和文本内容。

通过在一个全局变量或闭包中维护当前选中项的 信息对象，做到状态与 UI 的解耦。

完整示例

以下示例展示了一个简单的菜单结构，以及如何获取并显示当前选中项的信息。注意对比点包括事件对象、选中项的构造，以及如何更新高亮状态。

/* HTML 结构示例（请在页面中加入一个展示区域） 
<ul id="menu" class="menu"><li class="menu-item" data-id="home" data-index="0">首页</li><li class="menu-item" data-id="products" data-index="1">产品</li><li class="menu-item" data-id="contact" data-index="2">联系我们</li>
</ul>
<div id="selected-info"></div>

// 纯原生实现：获取当前选中项信息
document.addEventListener('DOMContentLoaded', function() {const menu = document.getElementById('menu');let current = null;menu.addEventListener('click', function(e) {const item = e.target.closest('.menu-item');if (!item) return;// 构造当前选中项信息const info = {id: item.dataset.id,index: Number(item.dataset.index),label: item.textContent.trim()};current = info;// 更新 UI 高亮[...menu.querySelectorAll('.menu-item')].forEach(i =>i.classList.toggle('active', i === item));// 显示信息const display = document.getElementById('selected-info');if (display) display.textContent = JSON.stringify(info);});
});

React 实现

核心要点

在 React 中，核心是通过 状态管理 来保存当前选中项的信息，onClick 处理器把项目对象传入并更新状态。

将每一项的标识、索引和文本放在一个对象中，确保在 UI 渲染和业务逻辑之间保持一致性，这样就可以快速扩展字段，如路由名、是否可用等。

示例代码

下面给出一个简化的函数组件示例，演示如何在点击菜单项时更新当前选中项信息并渲染到页面。

import React, { useState } from 'react';const Menu = () => {const items = [{ id: 'home', label: '首页', index: 0 },{ id: 'products', label: '产品', index: 1 },{ id: 'contact', label: '联系我们', index: 2 }];const [selected, setSelected] = useState(null);const handleClick = (item) => {setSelected({ id: item.id, index: item.index, label: item.label });};return (
{items.map(it => ( handleClick(it)}data-id={it.id}data-index={it.index}>{it.label}))}
{selected ? JSON.stringify(selected) : '请选择一个菜单项'}
);
};export default Menu;

Vue 实现

要点

在 Vue 中，数据驱动模板让交互变得直观，v-for 配合 事件绑定，即可将每一项的 id、index、label 保存在响应式数据里。

通过一个简单的对象来保存当前选中信息，路由关联或样式同步都可以基于这个对象来实现。

完整示例

下面给出一个单文件组件的核心实现，展示如何在点击时更新选中的信息并展示在页面上。

<template><div><ul class="menu"><li v-for="item in items" :key="item.id"@click="select(item)":class="{ active: selected?.id === item.id }">{{ item.label }}</li></ul><div id="selected-info">{{ selected ? JSON.stringify(selected) : '请选择一个菜单项' }}</div></div>
</template><script>
export default {data() {return {items: [{ id: 'home', label: '首页', index: 0 },{ id: 'products', label: '产品', index: 1 },{ id: 'contact', label: '联系我们', index: 2 }],selected: null};},methods: {select(item) {this.selected = { id: item.id, index: item.index, label: item.label };}}
};
</script>

Angular 实现

实现要点

在 Angular 里，通常使用 TypeScript 定义数据模型和事件处理，模板语法 与组件类协同工作，确保选中信息以对象形式存在。

通过 事件绑定 和 类绑定 来渲染选中状态，同时将 id、index、label 放入一个响应式对象。这样对路由、样式和辅助功能都很友好。

完整示例

以下为简化示例，展示如何在点击菜单项时更新当前选中项信息，并在模板中显示。

import { Component } from '@angular/core';interface MenuItem {id: string;label: string;index: number;
}@Component({selector: 'app-menu',template: `<ul class="menu"><li *ngFor="let item of items" (click)="select(item)"[class.active]="selected?.id === item.id">{{ item.label }}</li></ul><div id="selected-info">{{ selected ? (selected | json) : '请选择一个菜单项' }}</div>`
})
export class MenuComponent {items: MenuItem[] = [{ id: 'home', label: '首页', index: 0 },{ id: 'products', label: '产品', index: 1 },{ id: 'contact', label: '联系我们', index: 2 }];selected?: MenuItem;select(item: MenuItem) {this.selected = { id: item.id, index: item.index, label: item.label };}
}

多框架实现对比要点

共性要点

无论使用哪种前端框架，核心都是获取菜单项的 id、index、label，以及保持当前选中项的信息作为一个一致的对象。

通过数据驱动或事件驱动的方式更新 UI，确保 单向数据流 或 事件处理隔离，以降低副作用和维护成本。

差异要点

原生 JavaScript 侧重于直接 DOM 操作，适合简单场景；无需构建工具链，但代码分离度需要自行维护。

React 侧重于状态驱动，useState/props 提升可维护性；适合复杂交互和大应用。

Vue 的响应式系统使数据更新自动渲染，简化模板与逻辑，适合快速迭代。

Angular 提供结构化框架和依赖注入，强类型与模块化，适合企业级应用。