Question

使用服务器端Blazor，从下拉列表中选择后，我希望出现一个输入元素并获得焦点。为了设置焦点，我使用了JSInterop，但是元素没有获得焦点-我认为是因为尚未渲染，因为在屏幕上显示之后，我从下拉菜单中选择了其他内容，因此输入可以正确获得焦点

更改确定输入字段是否应该显示的布尔值后，我调用StateHasChanged（），因为在必要时应重新呈现DOM。然后，我调用SetFocus（），它是JSInterop，它只是执行element.focus（）javascript调用。只要输入元素在屏幕上，该部分就起作用。但是感觉就像我想要的是StateHasChanged回调，因此我可以在那时调用SetFocus（）。

在HTML代码中，这是显示/隐藏并应获得焦点的输入元素：

<input style="display: @(displayInputField ?  "block" : "none")" type="text" @ref="searchTermElement" />

...这是应该实际上使其显示/隐藏并设置焦点的C＃代码：

displayInputField = (selectedString != "SearchBy" && !showCenterFundList);
this.StateHasChanged();

await SetFocus(elementRef);

也许问题出在我的想法之外（试图在元素存在之前设置焦点），但这是我目前最好的猜测，也是我一直在寻找答案的地方。

更新：感谢enet的回答。我最终得到了解决我的问题的那小段代码（并且我怀疑将来会使我远离类似的问题）：

protected override async void OnAfterRender(bool firstRender)
{
    if (firstRender)
        ...
    else
        if (searchTypeChanged)
        {
            searchTypeChanged = false;
            await SetFocus(searchTermElement);
        }
}

Answer 1

要设置焦点，我使用JSInterop，但该元素未获得焦点-我认为是因为尚未渲染

在这种情况下，您应该使用OnAfterRender（bool firstRender）或OnAfterRenderAsync（bool firstRender）方法中的JSInterop

这两种方法都是使用JSInterop的理想选择...

希望这对您有帮助...

我怎么知道Blazor何时完成了DOM元素的渲染？

1 个答案: