onChange事件未触发Blazor InputSelect [英] onChange event not firing Blazor InputSelect

问题描述

对于InputSelect，我有以下代码

I have the following Code for an 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函数.有人可以指出这是怎么回事.适当值已更改，但未调用事件.

The RoleChange function is not invoked when i try to select a new item. Can someone point out what wrong with this. The value of the proper has changed but the Event was not called.

推荐答案

注意:

• InputSelect是一个组件元素，而不是HTML元素，这就是为什么您不能 将其应用于@onchange编译器指令.该指令适用于 元素，通常但不一定与value属性一起形成以下内容- 称为双向数据绑定.

• InputSelect is a component element, not HTML element, which is why you cannot apply to it the @onchange compiler directive. This directive is applied to elements, usually but not necessarily with the value attribute to form the so- called two way data-binding.

@ bind-Value是一个编译器指令伪指令，指示编译器执行以下操作: 产生启用组件之间双向数据绑定的代码.正在申请 @ bind-Value到InputSelect组件需要您(已在此完成 Blazor团队的案例)来定义一个名为Value的参数属性和一个 EventCallback委托"，通常命名为ValueChanged.价值和 ValueChanged是InputSelect组件的属性.

@bind-Value is a compiler directive directive instructing the compiler to produce code that enable two-way data binding between components. Applying @bind-Value to the InputSelect component requires you (already done in this case by the Blazor team) to define a parameter property named Value and an EventCallback 'delegate', conventionally named ValueChanged. Value and ValueChanged are properties of the InputSelect component.

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

There are a couple of ways to do this:

 <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事件.如果要取消使用包括EditForm在内的Forms组件，而使用常规的HTML标签，则可以这样做，在这种情况下，您将可以执行以下操作:

You can also implement INotifyPropertyChanged.PropertyChanged Event in your Model, as dani herrera has suggested. You do that if you want to do away with the Forms components, including the EditForm, and use the normal HTML tags instead, in which case you'll be able to do something like:

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

当然，您的模型类将会很厚，并且应该与EditContext进行通信....

Of course your model class is going to be thick, and it should communicate with the EditContext....

希望这对您有帮助...

Hope this helps...

这篇关于onChange事件未触发Blazor InputSelect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！