Блок @code не срабатывает при событии onclick - PullRequest
Новая
       12

Блок @code не срабатывает при событии onclick

1 голос
/ 03 ноября 2019

Я пытаюсь получить расширяющиеся меню, работающие в Blazor, пример того, почему должны быть Отчеты или что-то подобное, учитывая, что у меня может быть несколько отчетов, я хочу скрыть возможности, пока я не буду активно их искать.

Используя стандартный шаблон, я добавил событие onClick в NavMenu: 

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 не обновляется, оно все равно оценивается как ложное.

Я проверил _imports.razor, как было предложено в другом посте SO. И мой синтаксис кажется правильным в соответствии с примерами в приложении и в 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();
    }
}

1 Ответ

2 голосов
/ 03 ноября 2019

Если вы щелкнете по элементу <span>, сработает обработчик события.

Полагаю, вы просто не щелкаете по нему:

enter image description here

Попробуйте нажать знак +, и вы увидите, что ваше менюрасширен.

Конечно, вы также можете прикрепить обработчик событий к родительскому элементу, и будет происходить всплывающее окно событий.

...