Blazor如何通过onClick事件触发自定义事件实现搜索逻辑复用

实现方案 #

1. 封装公共搜索按钮组件 #

新建独立Razor组件，例如命名为SearchButton.razor，代码如下：

<button class="btn input-search-btn no-outline" @onclick="async () => await Search.InvokeAsync()">
    <!-- 此处可直接写死按钮内部内容，也可加插槽支持外部自定义 -->
    搜索
</button>

@code {
    /// <summary>
    /// 对外暴露的搜索自定义事件
    /// </summary>
    [Parameter]
    public EventCallback Search { get; set; }
}

如果需要支持不同页面自定义按钮显示内容（比如放不同的文字、图标），可以增加插槽参数：

<button class="btn input-search-btn no-outline" @onclick="async () => await Search.InvokeAsync()">
    @ChildContent
</button>

@code {
    [Parameter]
    public EventCallback Search { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

2. 业务页面引用组件 #

原有两个页面直接替换原有按钮代码即可，已经写好的独立Search方法不需要做任何修改：

<!-- 无插槽版本直接调用 -->
<SearchButton Search="@Search" />

<!-- 带插槽版本可以自定义按钮内容 -->
<SearchButton Search="@Search">
    <i class="icon-search"></i> 页面专属搜索
</SearchButton>

可选扩展：带参数的搜索事件 #

如果需要给搜索方法传递参数（比如输入框的搜索关键词），可以把事件改为泛型版本：

// 组件内代码修改
[Parameter]
public EventCallback<string> Search { get; set; }

// 触发事件时传递参数
await Search.InvokeAsync(搜索关键词变量);

页面绑定的Search方法对应修改为接收对应类型的参数即可正常使用。

内容的提问来源于stack exchange，提问作者bilpor