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

Question

我在Blazor组件中有以下剃刀标记：

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

当我在表单上修改联系人姓名并移出该控件时，NameChange 方法从未被调用。我是否需要执行其他操作才能触发onChange事件？

- Jesse

Answer 1

由于双向绑定订阅了 onchange 事件，因此您不能同时使用 @bind-value 和 @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;
    }
}

- agua from mars

Answer 2

尝试使用 on input（在输入每个符号时）或 on blur（在离开字段时导航）。

尝试使用 on input（在输入每个符号时）或 on blur（在离开字段时导航）。

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

bind-value使用@onchange更新组件的值，所以它们不能一起使用。

来自MS 文档：

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

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

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

- Michael

Answer 3

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

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

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

- MarkenJaden

---

问题在于绑定将在任何输入事件期间发生。SearchChanged方法仅在用户释放键时调用。例如，如果用户复制并粘贴数据到字段中，则输入将更改触发绑定，但用户没有释放键，因此您的SearchChanged方法将永远不会被调用。 - Jesse

通常情况下，简单的解决方法是将逻辑放在属性设置器中。但在我发布这篇文章的一年前，由于这是库代码，我无法访问属性，因此无法这样做。而且，我不想在每个属性中都编写此代码，否则会破坏我创建的 Blazor 组件的目的。 - Jesse

是的，对我来说，属性设置器逻辑似乎也是最直接的，我能想到的其他方法都会引入太多的复杂性。 - Yan D

Answer 4

您不能同时使用bind-value和@onchange。

- HannesPreishuber

---

没问题，这是正确的。进一步解释为什么以及替代方案是什么会更好。 - Mister Magoo