无法获取由 Javascript 设置的输入值，然后通过 Blazor 按钮单击读取

Question

在 .NET 5 blazor 应用程序中，我使用 JavaScript 库来读取条形码。当我按下 blazor 页面上的按钮时，我调用 javascript 函数。Javascript 函数读取条形码并设置输入字段的值。

有一个绑定到字符串值的输入字段：

<input id="result" @bind="@Received"/>

@code { private string Received { get; set; } }

单击按钮调用 JavaScript 函数：

public async Task Start()

{

    await JSRuntime.InvokeVoidAsync("startBarcodeReader");

}

Javascript 函数设置输入字段的值：

document.getElementById('result').value = "Barcode Value";

一切都按我的预期进行，我在屏幕上看到条形码值。我想Received在单击另一个按钮时使用。然而绑定值是空的。未设置。

public async Task Add()

{

    // Received is null

    await Task.CompletedTask;

}

如果我手动在输入字段中输入内容，则设置 Received 变量的值。除非焦点丢失，否则绑定似乎不会设置绑定变量。

如何获取我在输入字段中看到的值？我尝试使用 inout 字段的 oninout 事件，但没有成功。

Answer 1

通常，您的 JS 代码不应以任何方式干扰 Blazor 的渲染和边界功能。因此，您不能在 JavaScript 中为输入字段赋值并期望该值传递给边界变量Received。这永远不会发生。Blazor 如何知道输入字段的值已更改！输入字段是否附加了任何事件侦听器来通知 Blazor 已输入值？没有任何。解决方案：将值传递给 Blazor 方法，在该方法中您可以更新变量Received...之后组件将重新渲染，输入字段将在其中显示相同的值，但这一次是通过渲染和Blazor 的边界功能。注意：您可以DotNetObjectReference调用 JavaScript，将其传递给 C# 对象，该对象定义了从 JavaScript 调用时接收条形码值的方法。