Blazor中按Enter提交EditForm时InputTextArea无法清空的解决方法

问题原因 #

点击Send按钮时，EditForm会执行完整的表单提交生命周期：包括验证、触发OnValidSubmit，组件内部还会自动处理绑定值的状态重置；而按Enter键时只是直接调用了SendRequest方法，没有触发EditForm的原生提交流程，因此输入框绑定的Message值不会被清空。

解决方案 #

方法一：手动清空绑定值（最简单直接） #

在SendRequest方法执行完业务逻辑后，手动将Message设为空字符串，这样无论通过按钮还是Enter键调用该方法，都会清空输入框：

private async Task SendRequest()
{
    // 你的业务逻辑代码
    // something

    // 手动清空输入框绑定的值
    Message = string.Empty;
}

方法二：触发EditForm原生提交流程（贴合表单设计） #

如果希望Enter键的行为和点击Send按钮完全一致，可通过EditForm的引用触发原生提交：

1. 给EditForm添加引用标识：

<div class="edit-form">
    <EditForm @ref="editFormRef" Model="@Message" OnValidSubmit="SendRequest" OnInvalidSubmit="Invalid" @onkeyup="@Enter" class="edit-form">
        <DataAnnotationsValidator />
        <p><InputTextArea style="background-color:#4d4d4d;color:#cb8c04;font-weight:bold;" name="message" class="form-control" placeholder="Zadaj pytanie" @bind-Value="@Message"></InputTextArea></p>
        <!-- 按钮部分代码保持不变 -->
    </EditForm>
</div>

2. 在代码后台定义引用变量并修改Enter方法：

private EditForm? editFormRef;

private async Task SendRequest()
{
    // 你的业务逻辑代码
    // something
}

private async Task Invalid()
{
}

private async Task Enter(KeyboardEventArgs e)
{
    if (e.Code == "Enter" && !e.ShiftKey)
    {
        if (editFormRef != null)
        {
            // 触发表单原生提交，和点击Send按钮逻辑完全一致
            await editFormRef.SubmitAsync();
        }
    }
}

调用SubmitAsync会触发EditForm的完整提交流程，包括验证、执行对应回调，同时自动处理输入框的清空逻辑。

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