c# - 如何在 Blazor 中的输入更改上绑定(bind)和运行异步方法

Question

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

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

但是，这会导致错误

The attribute 'onchange' is used two or more times for this element. Attributes must be unique (case-insensitive). The attribute 'onchange' is used by the '@bind' directive attribute.

我想过在 NameFilter 属性 setter 中调用该方法，但在这种情况下我不能等待它。实现所需行为的正确方法是什么？

Answer 1

@bind 属性是一个编译器指令属性，它指示编译器创建支持两种方式数据绑定(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 变量绑定(bind)到 value 属性，并定义一个事件处理程序，如下所示:

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

但在这种情况下，您有责任更新绑定(bind)变量，您可以在事件处理程序本身中执行此操作，或者使用 Lambada 表达式作为 @onchange 的值

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

这是使用 lambda 表达式更新 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();
    }

祝你好运...