删除输入文本的所有内容，在 Blazor 中不使用 @bind

如何解决删除输入文本的所有内容，在 Blazor 中不使用 @bind

我想知道是否可以删除用户在输入文本控件中输入的所有内容，在 Blazor 中使用 C#，但不绑定控件。

我有几个文本输入但没有@bind，所以我不能删除与@bind 关联的变量

是否可以通过控件做一个“for”之类的，并询问它是否是输入文本类型以删除其内容？

谢谢！

解决方法

因此，在您使用扩展程序的这种情况下，最好查看扩展程序的实现方式并从中找出解决方案。如果您examine the source code，您将看到您要清除的过滤器的文本框绑定到column.Filter.SearchValue：

<TextEdit Text="@column.Filter.SearchValue" TextChanged="@(async (newValue) => await OnFilterChanged(column,newValue))" />

从那里开始，只需能够在 C# 中清除该属性。不幸的是，Blazorise 不支持对其 DisplayableColumns 属性的公开访问——您需要它来操作 SearchValue。一种 hacky 解决方法是将 DataGrid 子类化，因为属性是 protected：

public class MyDataGrid<TItem> : DataGrid<TItem>
{
    public IEnumerable<DataGridColumn<TItem>> MyColumns => DisplayableColumns;
}

有了这个，实现一个“清除过滤器”按钮来清除所有过滤器就很简单了。

<input type="button" value="Clear Filters" @onclick="ClearFilters" />

实现方式：

private void ClearFilters() 
{
    foreach (var column in dataGrid.MyColumns)
    {
        column.Filter.SearchValue = null;
    }
}

您还需要在字段中捕获 DataGrid：

private MyDataGrid<Person> dataGrid;

要设置该字段，您需要将 @ref="dataGrid" 添加到网格中。

现在，综上所述，很明显必须创建子类是次优的。我冒昧地在 opening an issue 中使用了 their GitHub repo 并将此答案作为解决方法引用。

没有子类的完整示例是：

<MyDataGrid TItem="Person" Data="@persons" Filterable="true" @ref="dataGrid">
    <DataGridColumn TItem="Person" Field="@nameof(Person.Name)" />
</MyDataGrid>

<input type="button" value="Clear Filters" @onclick="ClearFilters" />

@code {
    private MyDataGrid<Person> dataGrid;

    private void ClearFilters() 
    {
        foreach (var column in dataGrid.MyColumns)
        {
            column.Filter.SearchValue = null;
        }
    }

    private Person[] persons = new[]
    {
        new Person { Name = "John Doe" },new Person { Name = "Jane Down" }
    };

    public class Person 
    {
        public string Name { get; set; }
    }
}

请注意，由于 Blazor 中的明显限制，您需要在单独的文件中声明 MyDataGrid，而不是作为 @code 块中定义的类。