Blazor JS 互操作 getElementById 以获取组件引用

Question

我需要在 Blazor 中通过其 ID 获取对组件的引用。 注意：不使用 ElementReference，因为它用于通用代码。

我使用这个 JS 互操作脚本来做焦点，它对我来说很好：

  public async Task Focus(string elementId){
              await js.InvokeVoidAsync("eval", $@"document.getElementById(""elementId}"").focus()");
    }

但是我需要从 Blazor 获取的只是对元素（组件）的引用，即返回： document.getElementById(""{elementId}"") 将 elementId 作为参数发送。

有可能吗？

编辑：我已尝试使用此脚本，但从 Blazor 调用它时总是返回 null：

<script>
        window.GetElementById = (myId) => {
            return document.getElementById(myId);
        }
</script>

Answer 1

更新

专门回答你的问题。

您正在使用 InvokeVoidAsync 调用，如您所见，它返回一个 void。如果您使用 InvokeAsync 调用，则会返回一个空的 JsonDocument 对象。

所以不，您无法从 js 调用中获取可用的引用。

澄清问题之前的上一个答案

================================================ ============== 如果我正确阅读了您的问题，您希望将焦点设置为“一般”生成的 html 元素 id。

下面的答案显示了如何使用Element 或id 设置焦点。

使用以下代码将site.js 添加到wwwroot：

window.SetElementFocus = function (element) {
    element.focus();
    return element === true;
}

window.SetFocusByElementId = function (elementId) {
    var element = document.getElementById(elementId);
    element.focus();
    return element === true;
}

在你的启动文件中引用 js 文件（这是用于服务器的）

    <script src="/site.js"></script>
    <script src="_framework/blazor.server.js"></script>

然后这里是一个演示页面。

@page "/Test6"
<div class="m-2">
    <input type="text" @ref="Input1" placeholder="Input 1" id="input1" />
</div>

<div class="m-2">
    <input type="text" @ref="Input2" placeholder="Input 2" id="input2" />
</div>

<div class="m-2">
    <input type="text" @ref="Input3" placeholder="Input 3" id="input3" />
</div>

<div class="m-2 p-2">
    <button class="btn btn-dark me-1" @onclick="() => Focus(1)">Element Focus 1</button>
    <button class="btn btn-dark me-1" @onclick="() => Focus(2)">Element Focus 2</button>
    <button class="btn btn-dark me-1" @onclick="() => Focus(3)">Element Focus 3</button>
</div>

<div class="m-2 p-2">
    <button class="btn btn-secondary me-1" @onclick="() => FocusById(1)">Id Focus 1</button>
    <button class="btn btn-secondary me-1" @onclick="() => FocusById(2)">Id Focus 2</button>
    <button class="btn btn-secondary me-1" @onclick="() => FocusById(3)">Id Focus 3</button>
</div>


@code {

    [Inject] private IJSRuntime _js { get; set; }

    private ElementReference Input1;
    private ElementReference Input2;
    private ElementReference Input3;

    private async Task Focus(int no)
    {
        var input = no switch
        {
            1 => Input1,
            2 => Input2,
            _ => Input3
        };
        await _js.InvokeAsync<bool>("SetElementFocus", input);
    }

    private async Task FocusById(int no)
    {
        var input = no switch
        {
            1 => "input1",
            2 => "input2",
            _ => "input3"
        };
        await _js.InvokeAsync<bool>("SetFocusByElementId", input);
    }
}