Mudblazor 在 "Enter" 之后清除 TextField

Question

我在我的 Blazor Server 项目中使用 Mudblazor 组件 TextField。

我想在按下“Enter”后清除 TextField

这是我的 Index.Razor 中的代码：

@page :

<MudTextField class="pa-4" @bind-Value="newTodayTask" Clearable="true"
OnKeyUp="AddTodayTask" Adornment="Adornment.End" AdornmentIcon="@Icons.Outlined.Add"
FullWidth="false" Placeholder="Create a new task here, press Enter ↵ to save" Variant="Variant.Text" 
Style="width:600px; margin-bottom:10px"></MudTextField>

@代码：

public string newTodayTask { get; set; }

protected async Task AddTodayTask(KeyboardEventArgs e)
{
    if(e.Key == "Enter")
    {
        if (!string.IsNullOrWhiteSpace(newTodayTask))
        {
            var result = false;                
            var todaytask = new TodayTaskModel { TaskName = newTodayTask, DueDate = dueDate, TaskCreatedBy = taskCreatedBy};
            result = await Service.CreateTodayTask(todaytask);
            StateHasChanged();
            newTodayTask = string.Empty;

        }

    }
    OnInitialized();  
}

我已经尝试使用 string.Empty; 和 StateHasChanged(); 但仍然无效。

非常感谢能提供的任何帮助。谢谢

Answer 1

在某些平台上，在文本控件获得焦点时按“回车”键会隐式提交表单，implicit submission 模式。

因为你的表单只有一个输入元素，也许，最优雅的解决方案是使用这种模式作为你的数据输入的用户体验。你应该考虑 accessibility.

我post一个样本在try.mudblazor:

源代码：

<MudPaper Class="pa-4">
    <EditForm Model="@model" OnValidSubmit="OnValidSubmit">
        <MudTextField 
            @bind-Value="@model.Name" 
            Immediate="true" 
            Label="Some Text and press enter" />
    </EditForm>
</MudPaper>

<ul>
@foreach(var s in history)
{
    <li>@s</li>
}
</ul>

@code { 
    public class MyTask
    {
        public string Name {get; set;} = default!;
    }
    
    List<string> history = new List<string>();

    MyTask model =  new MyTask(){Name="hi"};

    private void OnValidSubmit()
    {
        history.Add(model.Name);
        model.Name = "";
        StateHasChanged();
    }

}

Mudblazor 在 "Enter" 之后清除 TextField

Mudblazor clear TextField after "Enter"

blazor

mudblazor