为什么我必须在 Blazor 上双击 Enter？

Question

我有 Blazor 页面，我想在其中创建一个待办事项列表，该列表会在按下按钮或用户按 Enter 时更新。我希望“输入”和按钮执行相同的操作（将我在框中输入的内容添加到我的待办事项列表中。现在“输入”有效，但我必须按两次输入。我只想按一次。按钮按预期工作。

    <input placeholder="Text Here" type="text" @onkeydown="@Enter" @bind="newTodo" />
    <button @onclick="AddTodo">Add todo</button>

    @code {
        private string newTodo;
        private IList<TodoItem> todos = new List<TodoItem>();

        private void AddTodo()
        {
            // Todo: Add the todo
            if (!string.IsNullOrWhiteSpace(newTodo))
            {
                todos.Add(new TodoItem { Title = newTodo });
                newTodo = string.Empty;

            }
        }
        public void Enter(KeyboardEventArgs e)
        {
            if (e.Key == "Enter")
            {
                // Todo: Add the todo
                if (!string.IsNullOrWhiteSpace(newTodo))
                {
                    todos.Add(new TodoItem { Title = newTodo });
                    newTodo = string.Empty;

                }
            }
        }
    }

     <ul>
         @foreach (var todo in todos)
        {
            <li>
                <input type="checkbox" @bind="todo.IsDone" />
                <input @bind="todo.Title" />
            </li>
        }
    </ul>

我尝试删除@onkeydown =“@Enter”，但显然除了按钮之外没有任何东西触发

和

if (e.Key == "Enter")
        {
            AddTodo()
         }

我希望后者能够跳过一些需要额外输入的步骤，但这让我在那里双重粘贴了代码。

Answer 1

如果您使用标准 Blazor 表单控件，它将按您的预期工作。

这是一个演示页面：

@page "/"

<PageTitle>Home</PageTitle>

<h1>Demo ToDo</h1>

<EditForm Model="_model"  OnValidSubmit="HandleValidSubmit">

    <div class="form-group col-md-4 mb-3">
        <label>ToDo</label>
        <InputText  class="form-control" @bind-Value="_model.Value" />
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

<div class="bg-dark text-white m-2 p-2">
    <pre>Value : @_model.Value</pre>
    <pre>Message : @_message</pre>
</div>

@code{
    private ToDo _model = new();
    private string? _message;

    private async Task HandleValidSubmit()
    {
        // Fake some async activity
        await Task.Delay(100);
        _message = $"Submitted at {DateTime.Now.ToLongTimeString()}";
    }

    public class ToDo
    {
        public Guid Uid { get; set; } = Guid.NewGuid();
        public string? Value { get; set; }
    }
}