如何在 Blazor 中通过 onclick 传递事件参数以获取 ID

Question

我正在尝试在 Blazor 应用程序中创建突出显示的选项卡系统。就像您如何拥有突出显示的活动导航组件一样。 因此，当单击按钮时，背景颜色会改变以表示它已被选中。

我可以使用 JavaScript 轻松完成此操作，方法是传递

e

并让

e.id

获取元素的 HTML ID。 但是，我现在尝试在 Blazor 应用程序中执行此操作，但我不知道如何完成此代码。

首先，单击时我无法将字符串作为参数传递。所以我现在正在尝试传递HTML的ID。

如何传递参数？ 如果做不到，我该怎么做才能制作这个标签系统？

这是我正在使用的一些基本代码，用于传递值并更改其中一个按钮的颜色。

@page "/store"

<PageTitle>Store</PageTitle>

<style>
    .tab-button {
        background-color: #ccc;
        color: #333;
    }

        /* CSS for selected buttons/tabs */
        .tab-button.selected {
            background-color: #007bff;
            color: #fff;
        }
</style>

<div class="h-screen">
    <div class="flex h-full">
        <section class="hidden md:grid md:grid-rows-nav bg-slate-600 h-full min-w-[250px] border-r-2 border-black border-solid h-full">
            <NavMenu />
        </section>

        <main class="relative w-full h-full grid">
            <h3>Store</h3>
            <div>
                <button id="abc" class="tab-button @(selectedTab == "tab1" ? "selected" : "")" @onclick="() => SelectTab(e)">Tab 1</button>
                <button id="xyz" class="tab-button @(selectedTab == "tab1" ? "selected" : "")" @onclick="() => SelectTab(e)">Tab 2</button>
            </div>
            <div>
                @if (selectedTab == "tab1")
                {
                    <p>Content for Tab 1</p>
                }
                else if (selectedTab == "tab2")
                {
                    <p>Content for Tab 2</p>
                }
            </div>
        </main>
    </div>
</div>


@code {
    private string selectedTab = "tab1";

    private void SelectTab(EventArgs e)
    {
        Console.WriteLine($"fsdfs {e.id}");
    }
}

我尝试传递各种参数并使用 eventArgs 使用这段代码，我将“e”设置为未定义，并且它没有传递任何数据。该错误提到它未在上下文中定义。

Answer 1

最简单的方法是将值作为参数传递。

<button id="abc" class="tab-button @(selectedTab == "tab1" ? "selected" : "")" 
    @onclick="@(() => SelectTab("tab1"))">Tab 1</button>
<button id="xyz" class="tab-button @(selectedTab == "tab2" ? "selected" : "")" 
    @onclick="@(() => SelectTab("tab2"))">Tab 2</button>

private void SelectTab(string e)
{
    selectedTab = e;
}

演示@BlazorFiddle