Blazor中如何无需定义ref变量将元素作为参数传入事件函数

Blazor 目前没有内置类似Angular的模板临时变量语法，以下两种是主流可行的落地方案，都可以省去单独声明ElementReference变量的冗余代码：

方案1：结合事件参数与JS互操作 #

不需要在组件中提前声明对应元素的ref变量，通过事件触发时的事件对象直接获取目标元素：

<!-- 页面代码，无需单独声明@ref和对应变量 -->
<button @onclick="HandleClick">点击按钮</button>

@code {
    [Inject] private IJSRuntime JS { get; set; }

    private async Task HandleClick(MouseEventArgs e)
    {
        // 直接从事件对象获取目标元素引用
        var targetElement = await JS.InvokeAsync<ElementReference>("e => e.target", e);
        // 后续直接使用targetElement即可
    }
}

这种方案适合临时需要获取触发事件元素的场景，不需要额外封装，代码改动最小。

方案2：封装通用组件隐式处理ref逻辑 #

如果需要频繁使用类似能力，可以把ref声明逻辑封装到通用组件内部，外部使用时完全不需要处理ref相关代码：

1. 首先封装通用按钮组件EventElementButton.razor

<button @ref="_internalRef" @onclick="() => OnClick?.Invoke(_internalRef)" @attributes="AdditionalAttributes">
    @ChildContent
</button>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public Action<ElementReference> OnClick { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object> AdditionalAttributes { get; set; }
    private ElementReference _internalRef;
}

2. 外部页面直接使用封装好的组件

<!-- 业务侧不需要写任何ref相关的冗余代码 -->
<EventElementButton OnClick="HandleBtnClick" class="btn-primary">
    点击按钮
</EventElementButton>

@code {
    private void HandleBtnClick(ElementReference btn)
    {
        // 直接拿到按钮元素引用
    }
}

这种方案适合高频使用场景，和Angular的写法体验接近，所有ref相关的冗余逻辑都被封装在组件内部，业务侧不需要额外处理。

注意：如果你的需求只是操作元素的属性、样式、显隐等状态，更推荐用Blazor原生的绑定语法实现，不需要获取ElementReference，性能和可维护性更高。

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