如何将泛型值绑定到Blazor子组件实现父组件数据同步

你需要按照Blazor双向绑定约定改造两个组件，通过委托实现泛型场景下的属性读写，完整修改如下：

1. 改造CustomRadioGroup支持双向绑定 #

调整组件参数符合Blazor @bind 语法约定，值变更时主动向上层同步：

@typeparam TValue
<InputRadioGroup TValue="TValue" Value="Value" ValueChanged="HandleValueChanged">
    @for (int i = 0; i < 5; i++)
    {
        <InputRadio class="form-check-input radio-input" Value="i">@i</InputRadio>
        <label class="form-check-label">@i</label>
    }
</InputRadioGroup>

@code {
    [Parameter]
    public TValue Value { get; set; }
    [Parameter]
    public EventCallback<TValue> ValueChanged { get; set; }

    private async Task HandleValueChanged(TValue newValue)
    {
        Value = newValue;
        await ValueChanged.InvokeAsync(newValue);
    }
}

2. 改造CustomInputForm支持子对象属性读写 #

新增读写子对象int属性的委托参数，处理泛型场景下的属性读写逻辑，同时避免foreach闭包陷阱：

@typeparam TItem
@typeparam TChild
<EditForm Model="Data">
    @foreach (var item in Data)
    {
        @* 循环内提前捕获子对象，避免闭包问题 *@
        var currentChild = GetChild(item);
        <CustomRadioGroup TValue="int" 
                          @bind-Value="GetSelectedValue(currentChild)"
                          @bind-Value:after="(selectedVal) => SetSelectedValue(currentChild, selectedVal)">
        </CustomRadioGroup>
    }
</EditForm>
@code {
    [Parameter]
    public IEnumerable<TItem> Data { get; set; }
    [Parameter]
    public Func<TItem, TChild> GetChild { get; set; }
    /// <summary>
    /// 从子对象中读取要绑定的int值
    /// </summary>
    [Parameter]
    public Func<TChild, int> GetSelectedValue { get; set; }
    /// <summary>
    /// 将选中的int值回写到子对象
    /// </summary>
    [Parameter]
    public Action<TChild, int> SetSelectedValue { get; set; }
}

3. 父组件使用示例 #

假设你的业务模型如下：

// TItem对应的业务类
public class BusinessItem
{
    // TChild对应的子对象
    public ChildOption Child { get; set; } = new();
}

public class ChildOption
{
    // 要绑定的int类型单选值
    public int SelectedRadio { get; set; }
}

在父页面调用组件即可实现值双向同步：

<CustomInputForm TItem="BusinessItem" 
                 TChild="ChildOption"
                 Data="YourItemList"
                 GetChild="item => item.Child"
                 GetSelectedValue="child => child.SelectedRadio"
                 SetSelectedValue="(child, val) => child.SelectedRadio = val">
</CustomInputForm>

@code {
    // 你的数据源
    private List<BusinessItem> YourItemList { get; set; } = new()
    {
        new BusinessItem(),
        new BusinessItem()
    };
}

实现原理 #

• 遵循Blazor双向绑定规范，子组件通过Value+ValueChanged参数组合对外提供@bind-Value绑定能力
• 通过读写委托屏蔽泛型类型差异，单选值变更后会直接回写到原TItem关联的子对象属性，全链路自动同步

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