Вызов метода экземпляра с использованием JSInterop - уведомление Blazor об изменении поля ввода с помощью JS

Question

Размещенный здесь ради этого, первоначально я написал этот вопрос на Blaredors subreddit , поскольку это был странный вопрос.

Проблема:

Мне нужно вызвать StateHasChanged, чтобы сообщить Blazor, что я изменил поля ввода с помощью JS (Библиотека, которую я должен реализовать, я застрял с этим независимо, поэтому мне нужно найти это решение.)

Описание и решения, которые я пробовал:

Я проверил проблему, созданную 2 года назад, но она не решает мою проблему, так как каждый раз, когда я следую их советам рассылки событие «изменить», ничего не происходит Хотя это было проверено путем отправки события на элемент body, поскольку трудно точно указать точный элемент, который необходимо обновить. Поэтому мое текущее решение пытается вызвать StateHasChanged в надежде, что я смогу заставить Blazor увидеть изменения в полевых входах.

Другая найденная информация:

Проверено здесь , но они не показывают вызов экземпляра метода, они просто упоминают, что это возможно, но не как.

Во-вторых, я проверил здесь , но я бы предпочел не передать экземпляр компонента, просто вызвать StateHasChanged.

Возможно, мне совершенно не нужно вызывать StateHasChanged, и я просто неправильно отправляю событие 'change', но нет хороших примеров того, как событие в Blazor в любом случае, так что, может быть, это еще лучшее решение.

Дополнительное решение Я пытался.

Редактировать 1:

Мне удалось чтобы вызвать StateHasChanged, учтите, вы не так, как я хотел бы, чтобы он назывался, но я назвал его, и это не имело значения, Blazor все еще не распознает измененные входные данные. Полагаю, я попробую материал события "изменить".

код:

//button in Blazor component:
<button type="button" u/onclick='async (e) => await jsRuntime.InvokeAsync<Task>("ChangeValueFromJs", DotNetObjectReference.Create(this))'>Test</button>

//code in component:
[JSInvokable("invokeFromJS")]
public Task ChangeValue()
{
    StateHasChanged(); 
    return Task.CompletedTask;
}

//Javascript on client side page:
function ChangeValueFromJs(wrapper) {
    return wrapper.invokeMethodAsync("invokeFromJS")
        .then(_ => {
            console.log('state has changed');
        });
}

Answer 1

Редактировать 2 (Решение):

Таким образом, я в итоге пошел по маршруту JS, отправив событие 'change' в виде решения от SteveSandersonMS по проблеме, которую кто-то сделал на Blazor репо очень похоже на мое. Однако я узнал две вещи, которые очень важны для использования этого решения.

1. Целью события для этого dispatchEvent (element.dispatchEvent('change', { 'bubbles' : true })), в данном случае элемента, должно быть поле ввода, полученное из querySelector (let element = document.querySelector("#input-field-username"))

2. Пузырьки должны быть правдой, хотя я не проверял это, я думаю, что кто-то упомянул это на одной из моих упомянутых страниц, что это важно.

// Not the greatest but - submits an update for *all* input fields, not only the changed ones, maybe improve this later.
let elements = document.querySelectorAll(".address-form-input");
if (elements) 
    elements.forEach(p => p.dispatchEvent(new Event('change', { 'bubbles': true })))

Надеюсь, это кому-нибудь поможет, ура.