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

Question

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

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

是否可以使用"for"通过控件，并询问是否为输入文本类型删除其内容?

谢谢!

Answer 1

所以在使用扩展的这种情况下，最好看看扩展是如何实现的，并从中找出解决方案。如果您检查源代码，您将看到您想要清除的过滤器的文本框绑定到column.Filter.SearchValue:

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

从那里，它只是一个能够清除c# 属性的问题。不幸的是，Blazorise不支持公众访问它的DisplayableColumns属性——你需要它来操纵SearchValue。一个简单的解决方法是子类化DataGrid，因为属性是protected:

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

有了这个，实现"Clear Filters"按钮，清除所有过滤器。

<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"添加到您的网格中。

现在，说了这么多，很明显必须创建一个子类是次优的。我冒昧地在他们的GitHub仓库中打开了一个问题，并参考了这个答案作为一个解决方案。

没有子类的完整示例是:

<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块中定义的类。