Blazor中如何通过ElementReference调用DOM元素的JS方法？

不用给元素加ID，直接通过ElementReference就能调用DOM方法，步骤很简单：

1. Blazor组件中绑定并传递ElementReference #

首先在组件里给目标元素绑定@ref获取ElementReference，再通过IJSRuntime把这个引用传给JS函数：

@inject IJSRuntime JsRuntime

<!-- 给输入框绑定ElementReference -->
<input @ref="usernameInput" placeholder="请输入用户名" />
<button @onclick="FocusInput">点击聚焦输入框</button>

@code {
    // 声明ElementReference变量
    private ElementReference usernameInput;

    private async Task FocusInput()
    {
        // 调用JS函数，把ElementReference作为参数传入
        await JsRuntime.InvokeVoidAsync("triggerElementFocus", usernameInput);
    }
}

2. 编写对应的JavaScript函数 #

在你的全局JS文件（比如wwwroot/js/site.js）里定义接收ElementReference的函数，直接调用DOM元素的方法即可：

// 接收Blazor传来的元素引用，调用focus方法
window.triggerElementFocus = function(element) {
    element.focus();
    // 也可以调用其他方法，比如element.scrollIntoView()、element.click()等
};

关键注意事项 #

• 必须确保元素已经完成渲染再调用JS方法：比如通过用户交互（按钮点击）触发，或者在OnAfterRenderAsync生命周期方法里调用（此时组件已经完成DOM渲染），避免因元素未挂载导致的错误。
• 如果需要获取DOM方法的返回值，用InvokeAsync<T>替代InvokeVoidAsync，比如获取元素的offsetHeight：

  var height = await JsRuntime.InvokeAsync<int>("getElementHeight", usernameInput);
  

  对应的JS函数：

  window.getElementHeight = function(element) {
      return element.offsetHeight;
  };
  

这种方式完全不需要手动管理元素ID，既避免了重复ID的风险，也能保持Blazor组件的独立性和复用性，比用document.getElementById的方式更符合Blazor的设计思路。

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