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

Question

我在 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 事件吗？

Answer 1

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

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

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

来自女士 documentation:

使用@bind 和 CurrentValue 属性 () 本质上等同于：

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

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

Answer 2

你不能同时执行 bind-value 和 @onchange

Answer 3

您不能执行 @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;
    }
}

Answer 4

我找到了一个更短更简单的变体。

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

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

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

Why would the onChange event of InputText not fire in Blazor?

events

blazor

blazor-server-side