Blazor中如何无需额外声明变量获取触发事件的组件自身引用

Blazor原生并不支持你写的@onclick="() => OnClick(@ref)"这种直接获取当前元素引用的语法，不过可以通过以下两种低代码量的方案实现类似效果，完全省去声明大量后备字段的样板代码：

方案1：通过事件参数动态获取元素引用（适配原生HTML元素） #

不需要提前声明任何@ref对应的后备字段，直接利用事件参数结合极少量JS互操作就能拿到触发事件的元素引用：

1. 先在全局JS（比如wwwroot/index.html引入的脚本）里添加一个通用工具方法：

window.getEventTarget = (eventArgs) => eventArgs.target;

2. Razor页面里直接写事件绑定即可：

@inject IJSRuntime JS

<!-- 多个按钮都可以复用同一个处理方法，不需要单独声明ref字段 -->
<button @onclick="HandleButtonClick">按钮1</button>
<button @onclick="HandleButtonClick">按钮2</button>
<button @onclick="HandleButtonClick">按钮3</button>

@code {
    private async Task HandleButtonClick(MouseEventArgs e)
    {
        // 直接获取触发当前点击事件的元素引用
        ElementReference triggerElement = await JS.InvokeAsync<ElementReference>("getEventTarget", e);
        // 后续对triggerElement的操作和用@ref拿到的引用完全一致
    }
}

方案2：自定义组件内置实例传递（适配自定义Blazor组件） #

如果是你自己开发的Blazor自定义组件，可以直接在组件内部把自身实例作为事件参数抛出，外部使用时完全不需要加@ref：

自定义组件内部代码（比如MyButton.razor） #

<button @onclick="InvokeCustomClick">
    @ChildContent
</button>

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

    [Parameter]
    public EventCallback<MyButton> OnClick { get; set; }

    private async Task InvokeCustomClick()
    {
        // 直接把当前组件实例作为参数抛出
        await OnClick.InvokeAsync(this);
    }

    // 你自己定义的组件公开方法/属性
    public void DoSomething()
    {
        // 业务逻辑
    }
}

父页面使用代码 #

<!-- 不需要加@ref，直接就能拿到触发事件的组件实例 -->
<MyButton OnClick="HandleMyButtonClick">自定义按钮1</MyButton>
<MyButton OnClick="HandleMyButtonClick">自定义按钮2</MyButton>

@code {
    private void HandleMyButtonClick(MyButton clickedButton)
    {
        // 直接调用触发事件的组件的公开方法
        clickedButton.DoSomething();
    }
}

这两个方案都可以完全避免大量样板字段的问题，适合有大量同类元素/组件的场景。

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