Blazor：如何在值变更时触发EventCallback

1. 拆分绑定逻辑，手动处理值变化事件 #

放弃@bind-Value的自动绑定语法，直接拆分绑定Value属性和ValueChanged事件，以此在异步方法中安全调用父组件的回调：

<MudTextField Value="@Code" 
    ValueChanged="@HandleCodeChanged"
    Label="Hex" 
    Variant="Variant.Outlined" >
</MudTextField>

2. 实现异步值处理方法 #

在组件代码中定义异步方法，负责更新本地字段并通知父组件值的变化：

private string _Code;

[Parameter]
public string Code
{
    get => _Code;
    set => _Code = value;
}

[Parameter]
public EventCallback<string> CodeChanged { get; set; }

private async Task HandleCodeChanged(string newValue)
{
    // 更新本地存储的字段值
    _Code = newValue;
    // 异步调用父组件回调，通知值已变更
    await CodeChanged.InvokeAsync(newValue);
}

3. 同步父组件主动更新的参数（可选） #

如果父组件可能主动修改Code参数值，需要在OnParametersSet方法中同步本地字段，避免状态不一致：

protected override void OnParametersSet()
{
    // 仅当父组件传递的值与本地值不同时才更新
    if (_Code != Code)
    {
        _Code = Code;
    }
}

原理说明 #

Blazor的属性setter要求同步执行，而EventCallback.InvokeAsync是异步方法，直接在setter中调用会导致异步操作无法被正确等待，引发状态不一致或线程问题。通过拆分绑定并使用异步事件处理方法，既能保证输入框实时响应输入，又能安全通知父组件更新绑定字段。

内容的提问来源于stack exchange，提问作者Khandakar Rashed Hassan