使用 JSInterop 调用实例方法 - 使用 JS 在输入字段更改时通知 Blazor答案

【问题标题】：Calling an instance method using JSInterop - Notifying Blazor on input field change with JS使用 JSInterop 调用实例方法 - 使用 JS 在输入字段更改时通知 Blazor
【发布时间】：2020-06-17 09:34:01
【问题描述】：

为了它而放在这里，最初我在Blazors subreddit上写了这个问题，因为这是一个奇怪的问题。

问题：

我需要调用 StateHasChanged 让 Blazor 知道我已经用 JS 更改了输入字段（我必须实现的库，无论如何我都坚持这个，所以我需要找到这个解决方案。）

我尝试过的描述和解决方案：

我检查了 2 年前创建的问题，但它并没有解决我的问题，因为每次我按照他们的建议发送“更改”事件时，都没有任何反应。虽然，这是通过在 body 元素上调度事件来测试的，因为很难确定需要更新的确切元素。所以我目前的解决方案是尝试调用 StateHasChanged，希望我能让 Blazor 查看字段输入的更改。

我发现的其他信息：

检查了here，但他们没有显示调用实例化方法，他们只是提到这是可能的，但没有提到如何。

其次，我检查了here，但我不想传递组件的实例，只是为了调用 StateHasChanged。

也许我绝对不需要调用 StateHasChanged，而我只是不正确地分派了“更改”事件，但无论如何都没有将该事件分派给 Blazor 的好例子，所以也许这是一个更好的解决方案。

其他solution我试过了。

编辑 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');
        });
}

【问题讨论】：

标签： c# asp.net-core blazor blazor-server-side

【解决方案1】：

编辑 2（解决方案）：

因此，我最终选择了 JS 路线，将“更改”事件作为 solution from SteveSandersonMS 发送给某人在 Blazor 存储库中提出的与我的非常相似的问题。不过，我确实学到了两件事对于使用此解决方案非常重要。

这个dispatchEvent (element.dispatchEvent('change', { 'bubbles' : true }))的事件目标，元素在这种情况下，必须是输入字段，来自querySelector (let element = document.querySelector("#input-field-username"))
冒泡应该是真的，虽然我没有测试过，我想有人在我的一个参考页面中提到它是很重要。

// 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 })))

希望这对任何人都有帮助，干杯。

【讨论】：