Blazor（MudBlazor）：使用onclick事件触发兄弟组件中的动作

Question

Blazor（MudBlazor）：使用onclick事件触发兄弟组件中的动作

3

我刚开始使用 Blazor，特别是 MudBlazor - 我似乎无法理解如何在兄弟组件中触发操作。

目前，我有以下组件：

<MudLayout>

    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e)=> HandleClick(e))" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    
    <NavMenu></NavMenu>
    
    <MudMainContent>
        @Body
    </MudMainContent>

</MudLayout>


@code {

    public void HandleClick(MouseEventArgs e){
        // How to trigger NavMenu action here?
    }
}

MudAppBar的目标是在用户点击按钮时触发导航菜单的出现。

我已经尝试了一些方法，如EventCallbacks、Cascading Parameters等，但所有示例似乎都是针对父/子关系的，而这是基于兄弟关系的。

NavMenu只是一个包含MudNavMenu的Razor组件，通过绑定到Open属性来切换可见性，就像示例中那样。

我确定我错过了非常简单的东西，但我只是在各种方法之间打转。

如果有人能提供一些提示，将不胜感激。

以下是NavBar组件标记以供参考：

<MudDrawer @bind-Open="_drawerOpen" Elevation="2">
    <MudDrawerHeader>
        <MudText Typo="Typo.h5" Class="mt-1">Application</MudText>
    </MudDrawerHeader>

    <MudDrawerContainer>

        <MudNavMenu Class="mud-width-full">

            <MudDivider Class="my-2" />
            <MudNavLink Href="/dashboard" Icon="@Icons.Filled.Dashboard">Dashboard</MudNavLink>
            <MudNavGroup Title="Level 0" Icon="@Icons.Filled.Settings" Expanded="false">
                <MudNavGroup Title="Level 1" Icon="@Icons.Filled.AdminPanelSettings" Expanded="false">
                    <MudNavGroup Title="Level 2" Icon="@Icons.Filled.People" Expanded="false">
                        <MudNavGroup Title="Level 3" Icon="@Icons.Filled.Lock" Expanded="false">
                            <MudNavLink Href="/delete" Icon="@Icons.Filled.DeleteForever">Delete Password</MudNavLink>
                        </MudNavGroup>
                    </MudNavGroup>
                </MudNavGroup>
            </MudNavGroup>
            <MudNavLink Href="/billing" Icon="@Icons.Filled.Receipt">Billing</MudNavLink>
        </MudNavMenu>
    </MudDrawerContainer>


</MudDrawer>



@code {

    bool _drawerOpen = true;

    public void ToggleMenu()
    {
        _drawerOpen = !_drawerOpen;
    }

}

快速更新：

我尝试将以下内容添加到我的NavMenu组件中：

    [Parameter]
    public bool IsOpen { get; set; }

    [Parameter]
    public EventCallback<bool> IsOpenChanged{ get; set; }

然后将其应用于MudDrawer：

<MudDrawer @bind-Open="IsOpen"

然后在MainLayout中，将其设置为标记：

<NavMenu @bind-IsOpen="_drawerOpen"></NavMenu>

然后，调整按钮的OnClick事件，使其调用以下内容（仍在MainLayout内）：

    bool _drawerOpen = true;

    public void ToggleMenu()
    {
        _drawerOpen = !_drawerOpen;
    }

这个代码是可行的。但是感觉有点不太对劲，我也不确定我的方法是否正确。理想情况下，我希望NavMenu能够管理自己的状态，而MainLayout中的按钮只需触发NavMenu正在监听的事件。

至少它是有效的。显然，我可以将MudNavMenu/Drawer放入同一布局中，这样就不会有这个问题了 - 但我想要掌握基本的组件通信，并且这似乎是一个非常简单的事情。

- PoorbandTony

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dimitris Maragkos · Accepted Answer

一个解决方案是使用@ref属性获取NavMenu组件引用，并使用该引用触发某些操作：

<MudLayout>

    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e)=> HandleClick(e))" />
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    
    <NavMenu @ref="_navMenuRef"></NavMenu>
    
    <MudMainContent>
        @Body
    </MudMainContent>

</MudLayout>


@code {
    private NavMenu _navMenuRef;

    public void HandleClick(MouseEventArgs e)
    {
        // call ToggleMenu or any other method
        _navMenuRef.ToggleMenu();
    }
}