Blazor Server中手动输入后文本输入双向绑定失效问题求助

问题描述 #

在.NET 7 Blazor Server项目中，实现了一个可手动输入、也可通过按钮设置值的文本输入框：

• 初始点击按钮能正常设置输入框值；
• 手动输入内容后，点击按钮无法再更新输入框内容，但页面上显示的@Value已正确更新，输入到Value的正向绑定正常，反向从代码更新Value到输入框的绑定失效。

问题原因 #

Blazor Server为避免打断用户输入操作，当输入框被用户手动激活编辑后，会进入本地编辑状态。此时组件重新渲染时，会优先保留输入框当前的DOM值，而非绑定的Value属性值，导致代码更新Value后，输入框的DOM不会同步更新。

解决方案 #

方案1：通过ElementReference手动同步输入框DOM值

给输入框添加引用，在按钮点击时直接设置输入框的value属性：

Text Input:
<input type="text" @bind-Value=Value @bind-Value:event="oninput" @ref="_inputElement" />
<br />
<button class="btn btn-primary" @onclick="IncrementCounter">Increment Counter and set Value </button>
<br />
Current Value: @Value
<br />
Current Counter Value: @_counter

@code {
    private int _counter = 1000;
    private string? Value { get; set; }
    private ElementReference _inputElement;

    private async Task IncrementCounter()
    {
        _counter++;
        Value = _counter.ToString();
        // 直接更新输入框的DOM值
        await _inputElement.SetAttributeAsync("value", Value);
    }
}

方案2：触发输入框失焦，强制同步绑定

让输入框在按钮点击时先获焦再失焦，触发Blazor的绑定同步逻辑：

<input type="text" @bind-Value=Value @bind-Value:event="oninput" @ref="_inputElement" />

private async Task IncrementCounter()
{
    _counter++;
    Value = _counter.ToString();
    // 通过失焦触发绑定同步
    await _inputElement.FocusAsync();
    await _inputElement.BlurAsync();
}

方案3：使用EditForm包裹（适合表单场景）

将输入框放入EditForm中绑定到模型，利用EditContext的状态通知机制更新输入框：

<EditForm Model="@_model">
    Text Input:
    <InputText @bind-Value="_model.Value" @bind-Value:event="oninput" />
</EditForm>
<br />
<button class="btn btn-primary" @onclick="IncrementCounter">Increment Counter and set Value </button>
<br />
Current Value: @_model.Value
<br />
Current Counter Value: @_counter

@code {
    private int _counter = 1000;
    private InputModel _model = new();

    private void IncrementCounter()
    {
        _counter++;
        _model.Value = _counter.ToString();
    }

    public class InputModel
    {
        public string? Value { get; set; }
    }
}

说明 #

之前尝试的INotifyPropertyChanged、StateHasChanged等方法无效，是因为Blazor的本地编辑状态缓存逻辑优先级高于组件渲染更新，即使触发重新渲染，也不会覆盖用户正在编辑的输入框DOM值。

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