Question

我正在使用@bind-value将选择元素的选择值绑定到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;
    }
}

我还创建了一个fiddle to demonstrate。

如果您从下拉菜单中实际选择一个项目，您会发现它工作正常。但是，如果单击这三个按钮之一，则会在下拉菜单中看到该值确实发生了变化，但是Blazor似乎并未意识到该值已发生变化。

如何解决此问题？

Answer 1

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

完全是... 您的select元素绑定到属性MyValue，并且每当呈现当前组件时，select元素都会从该属性获取其值。通过JS Interop更改选择对属性MyValue无效。解决此问题最简单的方法是将MyValue的值设置为传递给JS函数的参数，如下所示：

MyValue  = option;

但是调用JS函数变得多余...也许，您可以告诉我们您要实现的目标。

请记住，您不应将JS用于会干扰Blazor渲染系统的任务。

绑定到选择元素时出现Blazor问题

1 个答案: