Question

因此，我正在构建一个Blazor组件，我想在其中键入输入并触发AJAX请求以从服务器获取经过过滤的数据。我尝试过了

<input type="text" @bind="NameFilter" @onchange="FilterChangedAsync" />

但这会导致错误

此元素使用'onchange'属性两次或更多次。属性必须是唯一的（不区分大小写）。属性“ onchange” 由'@bind'指令属性使用。

我曾考虑过在NameFilter属性设置器中调用该方法，但在这种情况下，我无法等待。实现所需行为的正确方法是什么？

Answer 1

@bind属性是一个编译器指令属性，它指示编译器创建启用从变量到元素以及从元素到变量的双向数据绑定的代码。在后台，编译器创建onchange事件处理程序，其作用是在触发change事件时更新变量。因此，您不能两次使用onchange。相反，您应该执行以下操作：

<input type="text" @bind="NameFilter" />

要检索输入的数据，请定义如下属性：

public string NameFilter { get; set; }

在这种情况下，您可以添加带有单击事件处理程序的按钮控件，该事件可以访问NameFilter的值，并将其用于过滤调用，如下所示：

<button class="btn btn-primary" @onclick="@FilterMe">Filter Me</button>

然后

private void FilterMe()
    {
        var filter = NameFilter;
    }

或更妙的是，将NameFilter变量绑定到value属性，再定义一个事件处理程序，如下所示：

<input type="text" value="@NameFilter" @onchange="FilterChangedAsync" />

但是在那种情况下，您有责任更新绑定变量，这可以在事件处理程序本身中完成，或者使用lambada表达式作为@onchange的值

 private void FilterChangedAsync(ChangeEventArgs args)
    {
        NameFilter = args.Value.ToString();
    }

这是使用lambada表达式更新NameFilter属性的方法：

<input type="text" value="@NameFilter" @onchange="@(( args ) => NameFilter = args.Value.ToString())" />

注意：仅当您从文本框控件中跳出时，才会触发change事件，并且此行为可能不符合您的过滤要求。另一方面，输入事件在每次您在键盘上键入时发生。

使用输入事件：

<input type="text" @bind-value="@NameFilter" @bind-value:event="oninput" />

或者您也可以使用类似的方法做到这一点：

<input type="text" value="@NameFilter" @oninput="@FilterChangedAsync" />

和

 private void FilterChangedAsync(ChangeEventArgs args)
    {
        NameFilter = args.Value.ToString();
    }

祝你好运...