Razor组件中如何实现按下文本框回车键后调用指定方法

你原代码不生效的核心原因：@onsubmit是表单提交事件，只有绑定在<form>标签或Blazor内置的EditForm组件上才会触发，普通<input>元素本身不支持submit事件，直接绑定在input上不会执行。
你可以根据场景选下面两种实现方式： #

方案1：直接监听键盘事件（简单场景首选） #

给input绑定@onkeydown键盘事件，判断按下的按键为回车键时直接调用目标方法，不需要额外嵌套标签。
修改后的输入框代码：

<input @bind="nameToAdd" @onkeydown="HandleEnterKey" />

对应的事件处理逻辑写在@code块中：

@code {
    private string nameToAdd = string.Empty;

    private void HandleEnterKey(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            AddName();
        }
    }

    private void AddName()
    {
        // 原有的新增名称业务逻辑
    }
}

方案2：表单包裹实现（适合带验证的表单场景） #

如果输入框属于表单的一部分，建议用EditForm组件包裹输入框，利用表单原生的回车提交逻辑触发方法，后续加数据验证也更方便：

<EditForm Model="@this" OnSubmit="AddName">
    <input @bind="nameToAdd" />
    @* 加隐藏的提交按钮，兼容单输入框下部分浏览器不触发回车提交的问题 *@
    <button type="submit" hidden></button>
</EditForm>

Blazor会自动拦截表单默认的页面刷新跳转行为，不需要额外写阻止默认事件的代码。 #

小提示：Blazor Server模式下上述事件触发后会自动同步UI状态，不需要手动调用StateHasChanged。

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