Blazor中EventCallback未绑定及双向绑定失效问题求助

核心问题原因 #

1. EventCallback绑定失效：子组件Counter.razor使用了@rendermode InteractiveServer，而父组件Home.razor默认是静态渲染模式。Blazor中跨渲染模式边界无法传递EventCallback（它依赖组件渲染上下文，无法序列化），导致子组件中HasDelegate始终为false。
2. 双向绑定不更新UI：静态渲染组件没有交互式状态管理机制，@bind无法自动触发UI刷新。

修复步骤 #

1. 修改父组件Home.razor

添加交互式渲染模式，并简化EventCallback绑定方式：

@page "/"
@rendermode InteractiveServer
<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

Increment:
<input type="number" @bind="_incrementAmount" />

<p>Increment amount: @_incrementAmount</p>

<Counter IncrementAmount="_incrementAmount"
         OnOddCount="OddCountDetected"
         OnEvenCount="EvenCountDetected">
</Counter>

<div style="color: red; height: @Count; min-height:5px; background-color:burlywood; overflow:auto;">
    <p>
        Odd? @_odd.ToString()
    </p>
</div>

@code {
    private int _incrementAmount { get; set; } = 1;
    private int _count { get; set; }
    private bool _odd;

    public string Count
    {
        get { return _count + "px"; }
        set { _count = int.Parse(value); }
    }

    public async Task OddCountDetected(int count)
    {
        Console.WriteLine($"OddCountDetected called in Home.razor with count: {count}");
        _count = count;
        _odd = true;
        // 交互式模式下无需手动调用StateHasChanged，框架自动处理UI刷新
    }

    public async Task EvenCountDetected(int count)
    {
        Console.WriteLine($"EvenCountDetected called in Home.razor with count: {count}");
        _odd = false;
    }
}

2. 调整子组件Counter.razor（可选）

如果不需要单独访问/counter路由，可以注释掉@page指令，保持渲染模式与父组件一致：

@* @page "/counter" *@
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

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

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

    private async Task IncrementCount()
    {
        currentCount += IncrementAmount;

        Console.WriteLine($"Incrementing: Current count = {currentCount}, IncrementAmount = {IncrementAmount}");

        if (int.IsOddInteger(currentCount))
        {
            Console.WriteLine($"Odd count detected: {currentCount}");
            if (OnOddCount.HasDelegate)
            {
                Console.WriteLine("Invoking OnOddCount callback");
                await OnOddCount.InvokeAsync(currentCount);
            }
            else
            {
                Console.WriteLine("OnOddCount has no delegate");
            }
        }
        else
        {
            Console.WriteLine($"Even count detected: {currentCount}");
            if (OnEvenCount.HasDelegate)
            {
                Console.WriteLine("Invoking OnEvenCount callback");
                await OnEvenCount.InvokeAsync(currentCount);
            }
            else
            {
                Console.WriteLine("OnEvenCount has no delegate");
            }
        }
    }
}

关键说明 #

• 父子组件使用相同的渲染模式（InteractiveServer），确保EventCallback能正常传递并绑定。
• 交互式渲染模式下，@bind会自动处理状态变更后的UI刷新，无需手动调用StateHasChanged。
• 绑定EventCallback时直接使用方法名即可，无需额外包裹lambda表达式（除非需要添加自定义参数）。

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