Mudblazor очистить TextField после «Enter»

Я использую TextField компонента Mudblazor в своем проекте Blazor Server.

Я хочу очистить текстовое поле после нажатия «Ввод».

Вот мой код в моем 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();  
}

Я уже пробовал с строка.Пустой; и СостояниеИзменено();, но все равно не работает.

Я очень ценю любую помощь, которую могу предоставить. Спасибо

Как вы думаете, это хорошая идея, чтобы очистить тест при нажатии Enter? Как насчет EditForm, введите ключ по умолчанию для Submit.

dani herrera 14.05.2022 20:40

@daniherrera Спасибо за ваш ответ, так что мне нужно поместить это MudTextField в Mudform?

Sain Bar 15.05.2022 07:04

Привет, я не знаю, как обрабатывать отправку на Mudform. Я разместил образец с помощью EditForm, когда я прокомментировал.

dani herrera 16.05.2022 09:06
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare
Как развернуть сайты с помощью Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
1
3
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На некоторых платформах нажатие клавиши «Ввод», когда текстовый элемент управления сфокусирован, неявно отправляет форму, шаблон неявное подчинение.

Поскольку ваша форма имеет только один элемент ввода, возможно, самым элегантным решением будет использовать этот шаблон в качестве UX для ввода данных. Вы должны думать о доступность.

Выкладываю образец в попробуй:

Исходный код:

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

}

Другие вопросы по теме