blazor - @code 块未触发 onclick 事件

问题描述

我正在尝试在 Blazor 中扩展菜单，这是一个为什么会是报告等的示例，因为我可能有多个报告，我想隐藏这些可能性，直到我主动寻找它们。

使用 stock 模板，我向 NavMenu 添加了一个 onClick 事件：

bool _expandScreen = false;

void ExpandScreens()
{
    if (_expandScreen)
    {
        _expandScreen = false;
    }
    _expandScreen = true;
    StateHasChanged();
}

以下 html 位于菜单项之一的下方：

@if (_expandScreen)
{
    <NavLink class="expand-menu" href="">
       <span>Companies</span>
    </NavLink>
    <NavLink class="" href="">
       <span>DIN</span>
    </NavLink>
}

当我调试时，断点永远不会在代码块中命中。针对 html 的断点确实如此，但由于 _expandScreens 的状态未更新，它仍然评估为 false。

我已经按照另一篇 SO 帖子的建议检查了 _imports.razor。根据应用程序中的示例和 msdn 上的示例，我的语法似乎是正确的。

有人发现我错过的代码有什么问题吗？

编辑： NavMenu 的完整代码如下所示：

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true" @onclick="ExpandScreens"></span> Screens
            </NavLink>
            @if (_expandScreen)
            {
                <NavLink class="expand-menu" href="">
                    <span>Companies</span>
                </NavLink>
                <NavLink class="" href="">
                    <span>DIN</span>
                </NavLink>
            }
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
    </ul>
</div>

@code {
    bool _collapseNavMenu = true;
    bool _expandScreen = false;

    string NavMenuCssClass => _collapseNavMenu ? "collapse" : null;

    void ToggleNavMenu()
    {
        _collapseNavMenu = !_collapseNavMenu;
    }

    void ExpandScreens()
    {
        if (_expandScreen)
        {
            _expandScreen = false;
        }
        _expandScreen = true;
        StateHasChanged();
    }
}

标签： blazorblazor-server-side

blazor - @code 块未触发 onclick 事件

问题描述

解决方案

推荐阅读