c# - onChange 事件未触发 Blazor InputSelect

Question

我有以下 InputSelect 代码

               <InputSelect class="form-control form-control form-control-sm"
                             placeholder="Role"
                             disabled="@IsReadOnly"
                             @bind-Value="Model.Role"
                              @onchange="@RoleChanged">
                    <option value="Member">Member</option>
                    <option value="Admin">Admin</option>
                    <option value="Pioner">Pioneer</option>
                    <option value="Retailer">Retailer</option>
                </InputSelect>

对于代码:

bool ShowCreated;
bool ShowUpdated;
bool IsReadOnly;
string SelectedRole;

public EditForm AccountForm;
public Multi.Dtos.RegistrationDto Model = new Dtos.RegistrationDto() { Role = "Member" };

public void RoleChanged(ChangeEventArgs e)
{
    SelectedRole = e.Value.ToString();
    Console.WriteLine(e.Value);
}

当我尝试选择一个新项目时，不会调用 RoleChange 函数。有人可以指出这有什么问题。正确的值已更改，但未调用事件。

Answer 1

笔记:

InputSelect 是一个组件元素，而不是 HTML 元素，这就是为什么你不能
将@onchange 编译器指令应用于它。该指令适用于
元素，通常但不一定具有 value 属性来形成 so-
称为双向数据绑定(bind)。

@bind-Value 是一个编译器指令指令，指示编译器
生成支持组件之间双向数据绑定(bind)的代码。申请
@bind-Value 到 InputSelect 组件需要你(已经在这个
Blazor 团队的案例)来定义一个名为 Value 的参数属性和一个
EventCallback 'delegate'，通常命名为 ValueChanged。值(value)和
ValueChanged 是 InputSelect 组件的属性。

有几种方法可以做到这一点:

 <InputSelect ValueExpression="@(()=>comment.Country)" 
              Value="@comment.Country" 
              ValueChanged="@((string value) => OnValueChanged(value ))">
        <option value="">Select country...</option>
        <option value="USA">USA</option>
        <option value="Britain">Britain</option>
        <option value="Germany">Germany</option>
        <option value="Israel">Israel</option>
 </InputSelect>

和

private Task OnValueChanged(string value)
{
    // Assign the selected value to the Model 
    comment.Country = value;
    return Task.CompletedTask;
} 

正如 dani herrera 所建议的，您还可以在模型中实现 INotifyPropertyChanged.PropertyChanged 事件。如果您想取消 Forms 组件(包括 EditForm)并使用普通的 HTML 标签，您可以这样做，在这种情况下，您将能够执行以下操作:

<input type="text" value="@MyValue" @onchange=OnChange"/>

当然，你的模型类会很厚，它应该与 EditContext 通信......
希望这可以帮助...