如何判斷 Blazor 何時完成渲染 DOM 元素？

Question

使用服務器端 Blazor，從下拉列表中選擇后，我希望輸入元素出現並獲得焦點。 要設置焦點，我使用 JSInterop，但元素沒有獲得焦點——我認為是因為它還沒有被渲染，因為在它出現在屏幕上並且我從下拉列表中選擇了其他東西之后，輸入正確地獲得了焦點.

在更改確定是否應顯示輸入字段的 boolean 后，我調用 StateHasChanged() ，因為它應該在必要時重新呈現 DOM。 然后我調用 SetFocus()，它是簡單地執行 element.focus() javascript 調用的 JSInterop。 只要輸入元素在屏幕上，該部分就可以工作。 但感覺我想要的是一個 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...

希望這可以幫助...