穆德布拉佐尔在“进入”后清除TextField
穆德布拉佐尔在“进入”后清除TextField
提问于 2022-05-14 13:38:49
我在我的Blazor项目中使用了Mudblazor组件TextField。
在按下"Enter“后，我想清除TextField
下面是我的Index.Razor中的代码：
@网页：
<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()；但是仍然不起作用。
我真的很感激能提供的任何帮助。谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2022-05-16 07:05:09
在某些平台上，当文本控件聚焦时，点击"enter“键就会隐式地提交表单隐式提交模式。
因为您的表单只有一个输入元素，所以最优雅的解决方案是将此模式作为UX用于您的数据输入。你应该考虑一下accessibility.
我在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();
}
}Stack Overflow用户
发布于 2022-10-12 22:21:28
任何在今天之后发现这一点的人都需要TextUpdateSuppression=false控件上的MudTextInput
Stack Overflow用户
发布于 2022-08-09 09:51:09
您可以通过遵循路径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();
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72240748
复制相关文章
相似问题
腾讯云开发者
