Blazor Server：如何通过EventCallback<T>实现父子组件双向通信？

针对你遇到的「通过EventCallback调用父组件后无法获取返回结果更新子组件」的问题，以下是几种符合Blazor设计规范的解决方案：

方案一：通过EventCallback传递结果回调 #

将EventCallback的参数定义为包含业务数据和结果回调的元组，父组件处理完成后调用回调将结果返回给子组件：

子组件代码 #

[Parameter]
public EventCallback<(int AccountNumber, Action<string[]> OnValidationCompleted)> OnAccountEntered { get; set; }

private List<string> ValidationErrors { get; set; } = new();

private async Task HandleValidSubmit()
{
    try
    {
        DisableButton = true;
        ButtonText = "Please Wait, Validating Account Information";
        
        var accountNumber = Model.AccountNumber ?? 0;
        await OnAccountEntered.InvokeAsync(
            (accountNumber, errorMessages) => 
            {
                ValidationErrors.Clear();
                if (errorMessages?.Any() == true)
                {
                    ValidationErrors.AddRange(errorMessages);
                }
                // 手动触发子组件状态更新
                StateHasChanged();
            }
        ).ConfigureAwait(false);
    }
    finally
    {
        ButtonText = "Request";
        DisableButton = false;
    }
}

父组件代码 #

<ChildComponent OnAccountEntered="@HandleAccountValidation" />

@code {
    private async Task HandleAccountValidation((int AccountNumber, Action<string[]> OnValidationCompleted) args)
    {
        var errors = new List<string>();
        // 模拟账号验证逻辑（替换为实际业务代码）
        if (args.AccountNumber <= 0)
        {
            errors.Add("账号不能为空");
            errors.Add("账号必须为正整数");
        }
        // 将验证结果通过回调返回给子组件
        args.OnValidationCompleted(errors.ToArray());
    }
}

方案二：使用双向绑定参数 #

定义子组件的错误信息参数，通过Blazor的双向绑定机制让父组件更新该参数，子组件监听参数变化自动刷新：

子组件代码 #

[Parameter]
public EventCallback<int> OnAccountEntered { get; set; }

[Parameter]
public List<string> ValidationErrors { get; set; } = new();

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

private async Task HandleValidSubmit()
{
    try
    {
        DisableButton = true;
        ButtonText = "Please Wait, Validating Account Information";
        
        var accountNumber = Model.AccountNumber ?? 0;
        await OnAccountEntered.InvokeAsync(accountNumber).ConfigureAwait(false);
    }
    finally
    {
        ButtonText = "Request";
        DisableButton = false;
    }
}

// 可选：如果需要在参数变化时执行额外逻辑，重写该方法
protected override async Task OnParametersSetAsync()
{
    await base.OnParametersSetAsync();
    // 此处可添加参数变化后的自定义处理逻辑
}

父组件代码 #

<ChildComponent OnAccountEntered="@HandleAccountValidation" 
                @bind-ValidationErrors="_validationErrors" />

@code {
    private List<string> _validationErrors = new();

    private async Task HandleAccountValidation(int accountNumber)
    {
        _validationErrors.Clear();
        // 模拟验证逻辑
        if (accountNumber <= 0)
        {
            _validationErrors.Add("账号不能为空");
            _validationErrors.Add("账号必须为正整数");
        }
        // 触发双向绑定更新，通知子组件参数变化
        await ValidationErrorsChanged.InvokeAsync(_validationErrors);
    }
}

方案三：改进Func<T1, Task>的使用（解决StateHasChanged问题） #

如果坚持使用Func，只需在子组件获取返回结果后手动调用StateHasChanged()触发UI更新即可：

子组件代码 #

[Parameter]
public Func<int, Task<string[]>> ValidateAccount { get; set; }

private List<string> ValidationErrors { get; set; } = new();

private async Task HandleValidSubmit()
{
    try
    {
        DisableButton = true;
        ButtonText = "Please Wait, Validating Account Information";
        
        var accountNumber = Model.AccountNumber ?? 0;
        var errors = await ValidateAccount(accountNumber).ConfigureAwait(false);
        
        ValidationErrors.Clear();
        if (errors?.Any() == true)
        {
            ValidationErrors.AddRange(errors);
        }
        // 手动触发子组件状态更新
        StateHasChanged();
    }
    finally
    {
        ButtonText = "Request";
        DisableButton = false;
    }
}

父组件代码 #

<ChildComponent ValidateAccount="@ValidateAccountAsync" />

@code {
    private async Task<string[]> ValidateAccountAsync(int accountNumber)
    {
        var errors = new List<string>();
        if (accountNumber <= 0)
        {
            errors.Add("账号不能为空");
            errors.Add("账号必须为正整数");
        }
        // 模拟异步API调用
        await Task.Delay(1000);
        return errors.ToArray();
    }
}

方案选择建议 #

• 优先选择方案二：符合Blazor的双向绑定设计范式，代码更简洁规范，Blazor会自动处理组件状态更新。
• 若不需要持久化错误状态，方案一更灵活，适合一次性的结果回调场景。
• 方案三仅适合简单的返回值场景，需手动处理状态更新，不推荐作为常规方案。

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