Question

我试图在Blazor中扩展菜单，这就是为什么要使用Reports之类的示例，鉴于我可能有多个报告，所以我想隐藏可能性，直到我积极寻求它们。

使用股票模板，我在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();
    }
}

Answer 1

如果单击<span>元素，则会触发事件处理程序。

我想您只是不单击它：

尝试单击+号，您会看到菜单被展开。

当然，您也可以将事件处理程序附加到父元素，事件冒泡就会发生。

@code块未在onclick事件上触发

1 个答案: