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

【问题标题】：Cannot get input value set by Javascript and then read by Blazor button click无法获取 Javascript 设置的输入值，然后通过 Blazor 按钮单击读取
【发布时间】：2020-12-23 15:14:53
【问题描述】：

在 .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 事件，但没有成功。

【问题讨论】：

您需要将 .Net 方法调用回 Blazor 以设置 Received
@aguafrommars 我检查了blazor-university.com/javascript-interop/…，这似乎有点不必要的额外努力来获得这样的价值。一定有更简单的方法。
据我所知没有。阅读官方文档：docs.microsoft.com/en-us/aspnet/core/blazor/…
一种方法可能是更改“startBarcodeReader”的行为以实际返回条形码，并将 JSInterop 函数更改为接受返回值的函数。另一种选择可能是在您真正需要时尝试从某个 js 变量中读取条形码。我个人添加了一个全局帮助脚本，我可以使用 JSinterop 从任何地方调用它来访问 js 属性。
是的，我迷路了。我把文件外包了。谢谢

标签： javascript .net blazor

【解决方案1】：

通常，您的 JS 代码不应以任何方式干扰 Blazor 的呈现和边界功能。因此，您不能在 JavaScript 中为输入字段赋值并期望该值传递给边界变量Received。这永远不会发生。 Blazor 怎么知道输入字段的值发生了变化！是否有任何事件侦听器附加到输入字段以通知 Blazor 已输入值？没有。

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

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

【讨论】：

@Michel Jansson 返回值建议不起作用，因为条形码阅读器连续运行，当检测和读取条形码时，值在未定义的时间出现。非常感谢你提供的信息。解决问题。除了来自 Michel Jansson 的全局辅助函数想法来访问 js 属性也可以。