Mudblazor 在“Enter”后清除 TextField

Question

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

\n

我想在按“Enter”后清除文本字段

\n

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

\n

@页 ：

\n

<MudTextField class="pa-4" @bind-Value="newTodayTask" Clearable="true"\nOnKeyUp="AddTodayTask" Adornment="Adornment.End" AdornmentIcon="@Icons.Outlined.Add"\nFullWidth="false" Placeholder="Create a new task here, press Enter \xe2\x86\xb5 to save" Variant="Variant.Text" \nStyle="width:600px; margin-bottom:10px"></MudTextField>\n

\n

@代码 ：

\n

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

\n

我已经尝试使用string.Empty; 和StateHasChanged();但仍然不起作用。

\n

我真的很感谢您能提供的任何帮助。谢谢

\n

Answer 1

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

此代码 * .razor适合您：

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

Answer 2

今天之后发现此问题的任何人都需要 MudTextInput 控件上的 TextUpdateSuppression=false