.NET 7中Blazor @bind绑定值无法随按键实时更新的问题

这不是Bug，是你对Blazor的@bind默认行为理解有误——和Angular的实时绑定逻辑不同，Blazor默认的@bind是在输入框失去焦点时才会更新绑定的属性值，而非按键触发时同步。

解决方案：指定实时更新的绑定事件 #

通过@bind:event参数将绑定触发事件改为oninput，这样每次输入（按键、粘贴等操作）都会立即更新绑定的SelectedField.Name，同时你的CheckData方法也能拿到最新值：

<input type="text" @bind="@SelectedField.Name" @bind:event="oninput" @onkeyup="() => CheckData()" />
<label>@SelectedField.Name</label>

对应的后台代码无需修改：

@code {
    public void CheckData() 
    {
        Console.WriteLine(SelectedField.Name);
    }

    // 假设SelectedField是已定义的模型实例
    public YourFieldType SelectedField { get; set; } = new YourFieldType { Name = string.Empty };
}

原理说明 #

Blazor默认的@bind绑定的是onchange事件，该事件仅在输入框失去焦点（比如点击页面其他区域）时触发，这就是为什么你之前只有在输入框销毁后才看到值更新的原因。而oninput事件会在输入内容变化的瞬间触发，完美匹配你需要的实时同步需求。

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