绑定到 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 渲染系统的任务。