Blazor待办列表按Enter需双击才生效的问题求助

问题核心 #

你遇到的按Enter键需双击才能添加的问题，主要是因为单独处理键盘事件时，存在双向绑定更新滞后或浏览器默认表单提交行为干扰，导致首次按Enter无法正确触发添加逻辑。

最优解决方案：利用表单原生提交行为 #

直接用<form>标签包裹输入框和按钮，通过@onsubmit事件统一处理添加逻辑。这样点击按钮或按Enter键都会触发表单提交，既符合浏览器原生交互逻辑，又避免重复代码。

修改后的完整代码 #

<form @onsubmit="AddTodo">
    <input placeholder="Text Here" type="text" @bind="newTodo" @bind:event="oninput" />
    <button type="submit">Add todo</button>
</form>

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

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

    private void AddTodo(EventArgs e)
    {
        // 阻止浏览器默认表单提交行为，避免页面刷新
        e.PreventDefault();
        
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }

    // 移除原有的Enter键盘事件方法，无需单独处理
}

关键修改说明 #

1. <form>包裹元素：浏览器默认会在输入框按Enter时触发表单提交，无需手动监听键盘事件。
2. @bind:event="oninput"：让输入框内容实时同步到newTodo，避免默认onchange行为（失去焦点才更新）导致的绑定滞后。
3. e.PreventDefault()：阻止浏览器原生表单提交的页面刷新行为，适配Blazor单页应用逻辑。

备选方案：修复原有键盘事件逻辑 #

如果不想用表单，也可以修改原键盘事件代码：

• 将@onkeydown改为@onkeyup，确保输入内容已更新到newTodo；
• 在键盘事件方法中阻止默认行为，并调用AddTodo()：

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

@code {
    // ... 其他代码不变 ...

    public void Enter(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            e.PreventDefault();
            AddTodo();
        }
    }
}

内容的提问来源于stack exchange，提问作者data_user