.NET 8 Blazor子组件带处理方法的双向绑定问题求助

问题分析 #

当前组件实现存在三个核心问题：

1. About组件回调不符合约定：Blazor双向绑定要求回调参数命名为[参数名]Changed（比如Age对应AgeChanged），且你定义的InputChanged类型为EventCallback<string>，和年龄的int类型不匹配。
2. Home组件绑定方式错误：直接使用@oninput无法正确关联子组件的双向绑定逻辑，未遵循Blazor的双向绑定规则。
3. About组件未触发回调：SetAge方法在校验后没有通知父组件更新值，导致父子组件状态不同步。

修改后的组件代码 #

About子组件（Components\Pages\About.razor）

<h4>About component</h4>

<input type="number" @bind:get="Age" @bind:set="SetAge" />
<h2>Age: @Age</h2>

@code {
    [Parameter]
    public int Age { get; set; } = 18;

    // 遵循双向绑定命名约定：参数名+Changed，类型匹配int
    [Parameter]
    public EventCallback<int> AgeChanged { get; set; }

    async Task SetAge(int value)
    {
        if (value > 0 && value < 110)
        {
            // 更新子组件自身的Age值
            Age = value;
            // 触发回调通知父组件同步更新
            await AgeChanged.InvokeAsync(value);
        }
    }
}

Home父组件（Components\Pages\Home.razor）

@page "/"
@rendermode InteractiveServer

<h4>Home component</h4>
<!-- 使用Blazor双向绑定语法，自动关联Age和AgeChanged -->
<About @bind:Age="age" />
<h2>Home显示的年龄: @age</h2>

@code {
    int age = 5;
}

关键说明 #

• 双向绑定的核心是参数+对应Changed回调，Blazor的@bind:参数名语法会自动关联参数名Changed回调，无需手动绑定事件。
• SetAge方法改为异步是因为EventCallback.InvokeAsync返回Task，遵循Blazor异步最佳实践（若不需要异步逻辑，也可改为同步调用AgeChanged.Invoke(value)）。
• 校验逻辑保留在子组件中，实现了逻辑封装，父组件只需维护自身的age状态即可。

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