为什么 InputText 的 onChange 事件不会在 Blazor 中触发？答案

【问题标题】：Why would the onChange event of InputText not fire in Blazor?为什么 InputText 的 onChange 事件不会在 Blazor 中触发？
【发布时间】：2020-03-12 19:01:45
【问题描述】：

我在 blazor 组件中有以下 razor 标记：

<div class="form-group row">
    <label for="name">Contact: </label>
    <InputText id="name" @bind-Value="Contact.Name" @onchange="NameChanged"></InputText>
</div>

当我修改表单上的联系人姓名和选项卡时，NameChange 方法永远不会被调用。为了触发onChange 事件，我还需要做些什么吗？

【问题讨论】：

标签： events blazor blazor-server-side

【解决方案1】：

您不能执行@bind-value 和@onchange，因为双向绑定订阅了onchange 事件。

但你可以手动完成：

<div class="form-group row">
    <label for="name">Contact: </label>
    <InputText id="name" Value="@Contact.Name" ValueChanged="NameChanged" ValueExpression="() => Contact.Name" ></InputText>
</div>

@code {
    private void NameChanged(string value)
    {
        Contact.Name = value;
    }
}

【讨论】：

【解决方案2】：

尝试在输入时使用（在输入每个符号时）或在模糊时使用 - 当导航离开某个字段时。

<InputText id="name" @bind-Value="Contact.Name" @oninput="NameChanged" @onblur="NameChanged"></InputText>

bind-value 正在使用@onchange 更新组件值。所以不能一起使用。

来自 MSdocumentation:

将@bind 与 CurrentValue 属性 () 结合使用基本上等同于以下内容：

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

@code {
    private string CurrentValue { get; set; }
}

【讨论】：

【解决方案3】：

你不能同时做绑定值和@onchange

【讨论】：

这是正确的，如果能在此基础上进一步解释替代方案的原因和用途，那就太好了。

【解决方案4】：

我发现了一个更短更简单的变体。

<input @bind="searchString" @bind:event="oninput" @onkeyup="SearchChanged" >

然后可以使用@onkeyup 调用任何方法。

【讨论】：

这样做的问题是在任何输入事件期间都会发生绑定。 SeachChanged 方法只会在用户释放键时被调用。例如，如果用户将数据复制并粘贴到字段中，那么输入将更改触发绑定，但用户没有释放键，因此您的 SearchChanged 方法将永远被调用。
一般情况下的简单答案是将您的逻辑放入您的属性设置器中。就我而言，一年前当我发布这个时，我没有能力这样做，因为这是库代码，所以我无法访问这些属性。此外，我不想将其编程到任何地方的属性中，这会破坏我创建的 Blazor 组件的目的。