Blazor聊天程序按回车触发发送时出现对象引用未设置异常

嘿，这个问题我之前在Blazor开发中踩过坑！核心原因是回车键默认会触发浏览器的表单提交行为，这会导致你的组件（或者页面）重新渲染，messageInput的绑定值还没来得及更新，Send()方法就被调用了，所以才会抛出“对象引用未设置到对象实例”的错误。

最直接的修复方案：阻止回车键的默认行为 #

在你的submitMessageInput方法里，在调用Send()之前，先调用e.PreventDefault()，这样就能避免浏览器触发默认的表单提交，保持组件的状态和绑定值的完整性。修改后的代码如下：

public async Task submitMessageInput(KeyboardEventArgs e)
{
    if (e.Code == "Enter" || e.Code == "NumpadEnter")
    {
        e.PreventDefault(); // 关键：阻止默认表单提交，避免组件重新渲染
        await Send();
    }
}

额外的优化建议（让逻辑更规范） #

如果你的输入框是放在<form>标签内的，更推荐通过表单的onsubmit事件来统一处理发送逻辑，这样不管是点击按钮还是按回车，行为都能保持一致：

1. 调整HTML结构：

<form @onsubmit="HandleFormSubmit">
    <input @bind="messageInput" size="50" type="text" />
    <button type="submit">Send</button>
</form>

2. 实现表单提交方法：

private async Task HandleFormSubmit()
{
    // 这里可以先做消息非空校验
    if (!string.IsNullOrEmpty(messageInput))
    {
        await Send();
        // 发送后可清空输入框提升体验
        messageInput = string.Empty;
    }
}

这种方式下，回车键会自动触发表单的submit事件，Blazor会默认阻止表单的刷新行为，不需要额外处理键盘事件，代码更简洁易维护。

验证问题的小技巧 #

你可以在Send()方法的第一行加个日志或者断点，对比点击按钮和按回车时messageInput的值：

async Task Send()
{
    Console.WriteLine($"当前messageInput值：{messageInput}"); // 修复前回车时这里会是空字符串
    if (messageInput.StartsWith("/login") .....
}

修复后再测试，回车触发时就能拿到你输入的内容了。

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