Как узнать, когда Blazor завершил рендеринг элемента DOM? - PullRequest
Новая
       16

Как узнать, когда Blazor завершил рендеринг элемента DOM?

0 голосов
/ 31 октября 2019

Используя серверную часть 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);
        }
}

1 Ответ

2 голосов
/ 31 октября 2019

Чтобы установить фокус, я использую JSInterop, но элемент не получает фокус - я думаю, потому что он еще не был обработан

Если это так,Вы должны использовать методы JSInterop из OnAfterRender (bool firstRender) или OnAfterRenderAsync (bool firstRender)

Оба метода идеально подходят для использования JSInterop ...

Надеюсь, это поможет ...

...