Blazor：在使用 @bind 时如何在 <select> 中使用 onchange 事件？

Question

我需要能够在<select>. 问题是我也绑定了@bind，当我尝试使用@onchange 时出现错误，指出@bind 已经在使用它。我尝试使用@onselectionchange，但这没有任何作用（不运行该功能）。我可以忘记@bind 而只是将@onchange 分配给一个函数，但我不确定如何将选定的值传递给该函数。

我有以下代码：

<select @bind="@SelectedCustID" @ @onchange="@CustChanged" class="form-control">
    @foreach (KeyGuidPair i in CustList)
    {
        <option value="@i.Value">@i.Text</option>
    }
</select>

谢谢。

Answer 1

<select @bind="MyProperty">
<option>Your Option<option>
</select>

@code  {
    private string myVar;

    public string MyProperty
    {
        get { return myVar; }
        set
        {
            myVar = value;
            SomeMethod();
        }
    }

    private void SomeMethod()
    {
        //Do something
    }
}

Answer 2

只需添加@bind-value和 ，@bind-value:event="oninput"如下@onchange所示。注意小写字母。这对我来说没有任何问题。

<select @bind-value="variablenametokeepselectedvalue" @onchange="yourmethodname" @bind-value:event="oninput">
 <option value="1">Test</option>
</select>

Answer 3

@bind本质上等同于同时拥有value和@onchange，例如：

<input @bind="CurrentValue" />

相当于：

<input value="@CurrentValue" @onchange="@((ChangeEventArgs e) => CurrentValue = e.Value.ToString())" />

由于您已经定义了@onchange，而不是添加@bind，只需添加value以防止冲突：

<select value="@SelectedCustID" @onchange="@CustChanged" class="form-control">
    @foreach (KeyGuidPair i in CustList)
    {
        <option value="@i.Value">@i.Text</option>
    }
</select>

来源：https : //docs.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-3.1

Answer 4

从.NET 7 Preview 7开始，处理此问题的推荐方法是使用修饰符bind:after。

这是一个小例子（部分借自文档）：

<p>
    <label>
        Select one or more cities:
        <select @bind="SelectedCities" multiple @bind:after="DoSomething">
            <option value="bal">Baltimore</option>
            <option value="la">Los Angeles</option>
            <option value="pdx">Portland</option>
            <option value="sf">San Francisco</option>
            <option value="sea">Seattle</option>
        </select>
    </label>
</p>

<span>
    Selected Cities: @string.Join(", ", SelectedCities)
</span>

@code {
    public string[] SelectedCities { get; set; } = new[] { "bal", "sea" };

    // Run your logic here after a binding event
    private void DoSomething()
    {
        Console.WriteLine(string.Join(',', SelectedCities));
    }
}

Answer 5

这似乎是一个流行的混淆。首先你不能使用，@onchange因为它会在内部被@bind. 您应该能够从您的CustChanged属性的 setter 中访问选定的值。根据您尝试对 进行的操作，您CustChanged甚至可能不需要手动检查此值何时更新。例如，如果您的意图是CustChanged直接或间接（在 Linq 内）在您的 UI 中使用，则 UI 会CustChanged在您<select>更改时自动更新值。因此，对于大多数用例，我认为不需要检查它的更新时间。

要使用@onchange，您可以将其绑定到如下函数：

public void OnUpdated(ChangeEventArgs e)
{
    var selected = e.Value;
}

Answer 6

您可以@bind完全避免（如果您使用的是foreach）：

<select @onchange=@(handleChange)>
    @foreach (var option in _options){
        <option value=@option.Id selected=@(SelectedId == option.Id)>@option.Name</option>
    }
</select>

@code {
    public record Person(int Id, string Name);
    public int SelectedId { get; set; }
    public List<Person> _options = new List<Person>() {
        new Person(1,"A"),
        new Person(2,"B"),
        new Person(3,"C")
    };

    public void handleChange(ChangeEventArgs args) {
        Console.WriteLine(args.Value);
        SelectedId = Int32.Parse(args.Value.ToString());
    }

}

一些肮脏的细节：当我尝试将 F# 与服务器端 Blazor 一起使用时，我遇到了一些奇怪的行为。简而言之，将List选项设置为实体框架查询的结果（映射到记录列表）是不@bind正确的，但使用 C# 类而不是 F# 记录的虚拟选项列表确实有效。但这并不是因为它是记录，因为如果我将列表设置为 EF 查询，然后立即将其设置为虚拟记录列表，它仍然不@bind正确 - 但如果我注释掉 EF，它确实可以工作线。