无法获取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。但是，绑定值为null。它没有设置。

public async Task Add()
{
// Received is null
await Task.CompletedTask;
}

若我手动在输入字段中键入一些内容，那个么就会设置Received变量的值。似乎绑定不是设置绑定变量，除非焦点丢失。

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

Answer 1

通常，JS代码不应以任何方式干扰Blazor的渲染和边界功能。因此，您不能在JavaScript中将值分配给输入字段，并期望该值传递给边界变量Received。这种情况永远不会发生。Blazor怎么知道输入字段的值已经改变了！是否有任何事件侦听器连接到输入字段，以通知Blazor已输入值？没有一个

解决方案：将值传递给Blazor方法，在该方法中可以更新变量Received。。。之后，组件将重新渲染，输入字段将在其中显示相同的值，但这一次是由Blazor的渲染和边界功能完成的。

注意：您可以使用DotNetObjectReference来调用您的JavaScript，将对C#对象的引用传递给它，该对象定义了从JavaScript调用时接收条形码值的方法。