Blazor如何将外部组件事件添加到组件?

Question

我正在创建Blazor中的下拉菜单按钮。我想让组件做的事情是:

1. 为下拉菜单组件添加按钮
2. 菜单中的可添加按钮需要为onclick-bindable
下拉菜单按钮onclick应该打开/关闭菜单
3. 当菜单打开并按组件外时，需要关闭菜单

我的当前代码:

下拉菜单

<div class="more-options-menu-button">
<button @onclick="OnShowMenuClick" @onclick:stopPropagation="true">
<svg height="24px" width="24px">
<image href=@MoreOptionsIconUrl height="24px" width="24px"></image>
</svg>
</button>
@if (Display)
{
<section class="menu" @onclick:stopPropagation="true">
@MenuOptions
</section>
}
</div>
@code {
[Parameter]
public RenderFragment MenuOptions { get; set; }
private bool Display { get; set; }
private const string MoreOptionsIconUrl = "https://localhost:5001/svg/general/more_vert_24dp.svg";
public void Hide()
{
this.Display = false;
}
public void OnShowMenuClick()
{
this.Display = !this.Display;
}
}

MenuOption

<button id="Id" @onclick="OnClick">
@Title
</button>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public EventCallback OnClick { get; set; }
[Parameter]
public string Id { get; set; }
}

如何使用

<OptionsMenuComponent>
<MenuOptions>
<MenuOptionComponent Id="remove" Title="Remove" OnClick="Remove" />
</MenuOptions>
</OptionsMenuComponent>
@code {
private void Remove()
{
Console.WriteLine("Removing...");
}
}

我可以用上面的代码做除了4(关闭菜单时点击外部组件)。

如何处理与作用域组件无关的事件?

注意:我发现了一个库，它似乎可以处理我需要的每一个需求，但我不确定他们是如何创建相关组件的。

这个问题已经在这个主题中被问过了，但我被建议创建一个新的专题。

Answer 1

您是否尝试过使用onfocusout事件?这里的文档

在你的OptionsMenuComponent中，你可以试着看看它是如何工作的:

<div class="more-options-menu-button">
<button @onclick="OnShowMenuClick" @onclick:stopPropagation="true" @onfocusout="Hide">
<svg height="24px" width="24px">
<image href=@MoreOptionsIconUrl height="24px" width="24px"></image>
</svg>
</button>
@if (Display)
{
<section class="menu" @onclick:stopPropagation="true">
@MenuOptions
</section>
}

Answer 2

你可以使用@onfoucsout

当按钮被点击时，它被聚焦。因此，在按钮上，如果你给它一个@onfoucsout属性并调用切换下拉列表的函数或方法

例如:

<button onClick="@ToggleDropDownMenu())" @onfocusout="@(() => ToggleDropDownMenu())">
<div hidden="@(!_isMenuVisible)>
@MenuOptions
</div>

在你的razor文件中:

private bool _isMenuVisible = false;
private void ToggleDropDownMenu()
{
_isMenuVisible = !_isMenuVisible;
}