Blazor WebAssembly子组件向父组件传递计算结果方法咨询

要实现子组件CalculateCancelleds()的结果传递给父组件并展示，核心是利用Blazor的EventCallback完成子到父的通信，以下是具体修改步骤：

1. 修正子组件代码，触发回调传递结果 #

子组件已定义ReturnValue这个EventCallback<double>参数，但未在计算后触发回调。同时需将ReturnValue的访问修饰符改为public（父组件需要绑定该参数），并优化计算逻辑：

[Parameter] public double TotalPrice { get; set; }
[Parameter] public EventCallback<double> ReturnValue { get; set; }

protected override async Task OnParametersSetAsync()
{
    FileDetail = blabla; // 假设此处已正确赋值FileDetail集合

    // 执行计算并获取结果
    var calculatedResult = CalculateCancelleds(TotalPrice);
    // 触发回调，将结果传递给父组件
    await ReturnValue.InvokeAsync(calculatedResult);
}

public double CalculateCancelleds(double x)
{
    // 筛选已取消的记录并求和
    var totalCancelledNet = FileDetail
        .Where(item => item.StatusStr == "Cancelled")
        .Sum(item => item.Net);
    
    // 计算最终结果
    return x - totalCancelledNet;
}

2. 修改父组件代码，接收并展示结果 #

父组件需要定义变量存储子组件返回的结果，绑定子组件的ReturnValue回调，最后在页面展示该变量：

@code {
    // 存储子组件返回的计算结果
    private double _calculatedResult;

    // 其他现有业务代码...
}

<!-- 展示子组件的计算结果 -->
<td class="table-Net">$@_calculatedResult</td>

<!-- 绑定子组件的ReturnValue回调，接收计算结果 -->
<ChildComponent.ReservationDetail 
    TotalPrice="@objItem.Price" 
    Enix="@objItem.Enix" 
    Admin="@objUser.Admin" 
    FileStatus="@objItem.StatusString"
    ReturnValue="@(result => _calculatedResult = result)">
</ChildComponent.ReservationDetail>

原理说明 #

Blazor中组件间子向父传递数据依赖EventCallback机制：

• 子组件通过InvokeAsync触发回调，将计算结果作为参数传入；
• 父组件绑定回调后，会自动更新绑定的变量并重新渲染页面，展示最新的计算结果；
• 每当子组件的TotalPrice参数更新时，OnParametersSetAsync会重新执行计算并传递最新结果。

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