如何将焦点放在Blazor.Typeahead组件上？

问题描述

我在项目中使用BlazorTypeahead组件。我想将重点放在“预先输入”文本框中，但似乎无法弄清楚该如何做。这是我的页面。搜索和更改值的方法工作正常，因此我将其省略。

@page "/"
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components
@inject IJSRuntime jsRuntime
@inject blazored.LocalStorage.ILocalStorageService localStore

<blazoredTypeahead SearchMethod="SearchMyModel" TItem="MyModel" TValue="MyModel" Value="SelectedMyModel" ValueChanged="MyModelChanged" ValueExpression="@(() => SelectedMyModel)" placeholder="My Model name..." @ref="NewElementHere">
    <SelectedTemplate>
        @context.Name
    </SelectedTemplate>
    <ResultTemplate>
        @context.Name (@context.AnotherProperty)
    </ResultTemplate>
</blazoredTypeahead>
    
    
@code {
    //public blazoredTypeahead<MyModel,MyModel> NewElementHere { get; set; }
    ElementReference NewElementHere;
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Focus the element
            await jsRuntime.InvokeAsync<object>("BlazorFocusElement",NewElementHere);
        }
    }
}

index.html文件的标题中包含此脚本。

window.BlazorFocusElement = (element) => {
    if (element instanceof HTMLElement) {
        element.focus();
    }
};

上面的代码产生以下编译时错误：

错误CS0029无法隐式转换类型 'blazored.Typeahead.blazoredTypeahead '到 'Microsoft.AspNetCore.Components.ElementReference'

如果我删除了 ElementReference 并启用了@code中的[ie，remove comment]属性，它将建立，但是出现运行时错误错误发生。如果我在Web调试器控制台中查看，则显示为：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer [100] 未处理的异常呈现组件：派生类必须实现它System.NotImplementedException：派生类必须 实施

解决方法

您不能将ElementReference应用于组件... BlazoredTypeahead是一个组件，因此您不能这样做。 BlazoredTypeahead的作者应该提供了一种方法来做...查看此组件的方法和属性。也许此组件通过其属性之一提供了此类功能...

无论如何，您不能在此处使用ElementReference。但是我想您仍然可以使用JSInterop来设置焦点，即使您要将焦点设置为的输入文本没有id属性。只需查看Html源，识别输入文本元素，然后设计一种设置焦点的方法即可。

请注意，如果您使用的是.Net 5.0，则可以从Blazor设置焦点。