綁定到 select 元素時出現 Blazor 問題

Question

我正在使用@bind-value將 select 元素的選定值綁定到 Blazor 中的一個變量。如果我物理單擊下拉列表和 select 一個值，它工作正常。 但是，如果我 select 通過 Javascript 下拉一個值，Blazor 似乎沒有檢測到變化。 我寫了一個非常簡單的程序來演示。

這是我的組件.cshtml代碼：

@page "/"
@inject IJSRuntime JsRuntime

<select id="my-select-box" @bind-value="MyValue" @bind-value:event="onchange">
    <option value="0">-- Select Something --</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<br />

@if (MyValue == "0") {
    <div>Select an option</div>
} else {
    <div>You chose @MyValue</div>
}

<div style="margin-top: 20px">
    <button @onclick="@(() => SelectOptionThroughJs("1"))">Select Option 1</button>
    <button @onclick="@(() => SelectOptionThroughJs("2"))">Select Option 2</button>
    <button @onclick="@(() => SelectOptionThroughJs("3"))">Select Option 3</button>
</div>

@code {
    public string MyValue {get;set;} = "0";

    public async Task SelectOptionThroughJs(string option)
    {
        await JsRuntime.InvokeVoidAsync("helperFunctions.selectOption", option);
    }
}

這是我的 javascript 代碼：

window.helperFunctions = {
    selectOption: function(op) {
        var selectBoxElement = document.getElementById("my-select-box");

        selectBoxElement.value = op;
    }
}

我還創建了一個小提琴來演示。

如果您從下拉列表中實際 select 一個項目，您會發現它工作得很好。 但是，如果您單擊 3 個按鈕之一，您會看到下拉列表中的值確實發生了變化，但 Blazor 似乎沒有意識到該值發生了變化。

我該如何解決這個問題？

Answer 1

Blazor 好像沒意識到值變了

確切地說...您的 select 元素綁定到屬性 MyValue，並且無論何時呈現當前組件，select 元素都從該屬性獲取其值。 通過 JS Interop 更改選擇對屬性 MyValue 沒有影響。 解決這個問題最簡單的方法是將 MyValue 的值設置為您傳遞給 JS function 的參數，如下所示：

MyValue  = option;

但隨后調用 JS function 變得多余......也許，你可以告訴我們你想要實現的目標。

需要記住的一點是，您不應該將 JS 用於此類會干擾 Blazor 渲染系統的任務。