C# Blazor - 如何限制文本框的 onChange 事件

Question

我对 Blazor 和 razor 页面非常陌生。我正在尝试处理文本框的 onChange 事件，但我想对其进行限制，以便在输入停止几秒钟后才会触发，以节省网络流量。

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

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

@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

您可以按如下方式设置任务。每次触发“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();
    }
}