在没有 @oninput 的情况下获取 Blazor 中输入字段的值答案

【问题标题】：Get value of an input field in Blazor without @oninput在没有 @oninput 的情况下获取 Blazor 中输入字段的值
【发布时间】：2020-07-24 12:33:41
【问题描述】：

我有一个由 Blazor <InputText> 组件生成的 HTML <input> 元素。

我正在使用 JavaScript 库来检测用户何时扫描条形码。当此事件发生时，我将扫描条形码的值设置到 <input> 元素中。

我想在 C# 中立即意识到这种值的变化。通常我会使用@bind-event:oninput 来确保当它发生变化时我立即拥有当前值，但是当通过代码设置 HTML 输入的值时不会触发此事件。

有没有办法通过 JavaScript 为 HTML 输入赋值，然后让 C# 立即知道更改并更新 InputText 控件绑定到的 C# 对象的属性？

【问题讨论】：

您能解释一下为什么要通过 JS 而不是 C# 来设置值吗？
我正在使用 JS 库来扫描条形码。我找到了解决我的问题的方法，但它非常hacky（幸运的是，这只是一个概念证明）。看我的回答。
最简单的方法是在输入上设置值，然后使用input.dispatchEvent(...) 向其发送change 或input 事件 - 这样您就不必创建大量额外的代码

【解决方案1】：

我已经通过以下方式解决了这个问题：

如果您在 JS 中有您想要在 C# 中的值，请将其应用于字段并在按钮上调用 .click()。此按钮调用一个 C# 方法，该方法调用一个 JS 函数，该函数将输入的值作为字符串返回给您的 C# 方法，您现在可以随意使用它。

虽然这是一个肮脏的解决方案，但它确实有效。

我试图让 invokeMethodAsync 直接调用我的 C# 方法，但这要求它是静态的，我根本没有时间让这个项目以正确的方式进行。

【讨论】：

js 库是否有某种在用户扫描时触发的事件？
@petermorris 是的。调用 onDetected 的是 Quaggajs。这是我想将我的条形码传递到 C# 端的地方。我认为使用 JS 库可能是第一个错误。
每次触发此事件时，我都会让 JS 调用静态 C# 方法。然后我将从 InputText 下降并让它执行以下操作 1：使用 @onfocus 记录控件已聚焦 2：使用 @onblur 记录它未聚焦 3：订阅每当该静态 C# 时触发的静态事件方法被调用。 4：实现 IDisposable 以便您可以取消订阅静态事件（以防止内存泄漏） 5：每当事件触发并且输入聚焦时，控件应该更新其值。