Mudblazor 在 \"Enter\" 后清除 TextField答案

【问题标题】：Mudblazor clear TextField after "Enter"Mudblazor 在 \"Enter\" 后清除 TextField
【发布时间】：2022-08-09 17:51:09
【问题描述】：

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

我想在按下 \"Enter\" 后清除 TextField

这是我的代码索引.剃刀：

@页：

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

我已经尝试过字符串。空；和StateHasChanged();但仍然无法正常工作。

我非常感谢可以提供的任何帮助。谢谢

您认为在按 Enter 时清除测试是个好主意吗？怎么办EditForm，回车是Submit 的默认键。
@daniherrera 感谢您的回复，所以我需要将此 MudTextField 放入 Mudform 中吗？
嗨，我不知道如何处理 Mudform 上的提交。正如我评论的那样，我使用 EditForm 发布了一个示例。

标签： blazor mudblazor

【解决方案1】：

在某些平台上，当文本控件获得焦点时点击“enter”键会隐式提交表单，implicit submission图案。

因为您的表单只有一个输入元素，也许最优雅的解决方案是将此模式用作数据输入的 UX。你应该三思可访问性.

我在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();
    }

}

【讨论】：

【解决方案2】：

您可以通过以下路径找到此示例和其他示例MudBlazor/src/MudBlazor.UnitTests.Viewer/TestComponents/TextField/https://github.com/MudBlazor/MudBlazor

此代码 *。剃刀为你：

<MudTextField @bind-Value="value" 
              Immediate="true" OnKeyDown="OnKeyDown" 
              Label="Hit Enter to Clear" 
              TextUpdateSuppression="false">
</MudTextField>
<br>
<span>value: @(value)</span>

@code {
  string value;

  async void OnKeyDown(KeyboardEventArgs args) 
  {
    if (args.Key=="Enter") 
    {
        await Task.Delay(100);
        value = "";
        StateHasChanged();
    }
  }
}

【讨论】：