绑定到select元素时出现Blazor问题

Question

我使用@bind-value将select元素的选定值绑定到Blazor中的变量。如果我实际单击下拉菜单并选择一个值，它会很好地工作。然而，如果我通过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;
}
}

我还制作了一把小提琴来演示。

如果你从下拉列表中选择一个项目，你会发现它运行得很好。然而，如果你点击这3个按钮中的一个，你会在下拉列表中看到值确实发生了变化，但Blazor似乎没有意识到值发生了变化。

如何解决此问题？

Answer 1

Blazor似乎没有意识到的价值变化

没错。。。select元素绑定到属性MyValue，每当渲染当前组件时，select元素都会从属性中获取其值。通过JS Interop更改选择对属性MyValue没有影响。解决这个问题最简单的方法是将MyValue的值设置为传递给JS函数的参数，如下所示：

MyValue  = option;

但是调用JS函数就变得多余了。。。也许，你可以告诉我们你正在努力实现什么。

需要记住的一点是，不应该将JS用于干扰Blazor渲染系统的任务。