無法獲取由 Javascript 設置的輸入值，然后由 Blazor 按鈕單擊讀取

Question

在 .NET 5 blazor 應用程序中，我使用 javascript 庫來讀取條形碼。 當我按下 blazor 頁面上的按鈕時，我調用 javascript function。 Javascript function 讀取條形碼並設置輸入字段的值。

有一個綁定到字符串值的輸入字段：

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

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

單擊按鈕調用 javascript function：

public async Task Start()
{
    await JSRuntime.InvokeVoidAsync("startBarcodeReader");
}

Javascript function 設置輸入字段的值：

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

一切都按我的預期工作，我在屏幕上看到條形碼值。 當我單擊另一個按鈕時，我想使用Received 。 但是綁定值為 null。 未設置。

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

如果我在輸入字段中手動輸入內容，則設置 Received 變量的值。 除非失去焦點，否則似乎沒有設置綁定變量。

如何獲取我在輸入字段中看到的值？ 我嘗試使用 inout 字段的 oninout 事件，但沒有成功。

Answer 1

通常，您的 JS 代碼不應以任何方式干擾 Blazor 的渲染和邊界功能。 因此，您不能將值分配給 JavaScript 中的輸入字段並期望該值傳遞給邊界變量Received 。 這永遠不會發生。 Blazor如何知道輸入字段的值發生了變化？ 是否有任何事件偵聽器附加到輸入字段以通知 Blazor 已輸入值。 沒有任何。

解決方案：將值傳遞給 Blazor 方法，您可以在該方法中更新變量Received ... 之后組件將重新渲染，輸入字段將在其中顯示相同的值，但這次是通過渲染完成的和 Blazor 的邊界特征。

Note: You can employ DotNetObjectReference to call your JavaScript, passing it a reference to a C# object that defines a method to receive the value of the barcode when called from JavaScript.