C#Blazor-如何为我的文本框节流onChange事件

Question

我对Blazor和剃刀页面很陌生。我正试图为我的文本框处理onChange事件，但我想对其进行节流，以便在输入停止几秒钟后才触发，以节省网络流量。

你可以/应该使用JavaScript来做这样的事情吗？比如setTimeOut之类的？

这是我正在使用的代码，下面是我在这里找到并尝试的

@page "/todo"
<pagetitle>Todo</pagetitle>
<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>
<table>
@foreach (var todo in todos)
{
<tr>
<td>
<input type="checkbox" @bind="todo.IsDone" />
</td>
<td>
<input type="text" style="border:none;" @bind="todo.Title" />
</td>
</tr>
}
</table>
<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>
@code {
private List<TodoItem> todos = new();
private string? newTodo;
private void AddTodo()
{
if (!string.IsNullOrWhiteSpace(newTodo))
{
todos.Add(new TodoItem { Title = newTodo });
newTodo = string.Empty;
}
}
}

我试过几件事，一件有效，另一件无效(一件无效，语法似乎更直观(。。。

这不起作用，因为它不知道<InputText>元素是

<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;
}
}

这确实有效，但不知道如何节流？

<input class="form-control form-control-sm" type="number" step="any" @bind-value:event="onchange"
@oninput="CalculateStandardDimensions" @bind-value="Cyclone.CycloneSize" />
@code
{
public class Cyclon
{
public Int32 CycloneSize { get; set; } = 10;
}
public Cyclon Cyclone = new Cyclon();
private void CalculateStandardDimensions(ChangeEventArgs args)
{
// Do Stuff Here
System.Console.WriteLine("test123");
}
}

Answer 1

您可以按如下方式设置Task。每次"；onchange"；如果触发，则它将取消已在运行的任务。如果要取消的任务是异步的，您可以直接取消它。

@using System.ComponentModel
@implements IDisposable
<input type="text" value="@someText" @onchange="OnChangeTask"/>
<label>@counter</label>
@code
{
private string someText;
private CancellationTokenSource src = new();
int counter;
private async Task OnChangeTask(ChangeEventArgs args)
{
someText = args.Value.ToString();
src.Cancel();
src = new();
await Task.Delay(5000, src.Token).ContinueWith(DoSomeWork,src.Token);
}
private void DoSomeWork(Task obj)
{
counter++;
}

public void Dispose()
{
src.Dispose();
}
}

Answer 2

创建一个处理此问题的自定义组件的好机会。在项目的共享文件夹中创建一个新的剃须刀组件。

@using System.Timers
@implements IDisposable
<div class="input-group @CssOuter">
<input id="@ElementId" class="@CssClass" @bind="@SearchText" @onkeydown="SearchTextChanged" placeholder="@PlaceholderText"
@bind:event="oninput" disabled="@IsDisabled"/>
</div>

因此，我们将包装输入元素，并允许使用参数@cssOverer修改其CSS。

Input元素本身有一些参数，我们可以使用这些参数来访问输入的id、类、占位符以及它是否被禁用。注意下面的默认值(这意味着我们在使用元素时不必指定它(

@code 
{
[Parameter] public string ElementId { get; set; }
[Parameter] public bool IsDisabled { get; set; } = false;
[Parameter] public string SearchText { get; set; }
[Parameter] public EventCallback<string> OnSearchFinished { get; set; }
[Parameter] public string PlaceholderText { get; set; }
[Parameter] public string CssClass { get; set; } = "form-control";
[Parameter] public string CssOuter { get; set; } = "mb-4";
private Timer searchTimer;
private int debounceTime = 700;
protected override void OnInitialized()
{
searchTimer = new Timer(debounceTime);
searchTimer.Elapsed += OnTimerElapsed;
searchTimer.AutoReset = false;       
}
private void SearchTextChanged()
{
searchTimer.Stop();
searchTimer.Start();
}
private void OnTimerElapsed(object source, ElapsedEventArgs e)
{
OnSearchFinished.InvokeAsync(SearchText);
}
public void Dispose()
{
searchTimer.Elapsed -= OnTimerElapsed;
}
}

将debounceTime更改为您希望的值，在这种情况下为0.7s。EventCallback方法是在最后一次键盘敲击后，当取消跳动计时器过去时将引发的方法。

这就是你在剃刀页面中使用它的方式

<InputWithDebounce CssClass="form-control form-control-sm"
ElementId="myIdStyle" PlaceholderText="Search anything..."
OnSearchFinished="MethodToRaise"
SearchText="@SearchText">
</InputWithDebounce>
@code {
public string SearchText {get;set;} = string.Empty;
public async Task MethodToRaise(string searchText)
{
// do something
}
}