Blazor中Radio Button双向绑定及父子组件传值问题排查

你的实现存在两个核心问题：

• 类型不匹配导致单选按钮样式异常：InputRadioGroup绑定了字符串类型的SelectedValue，但InputRadio的Value是枚举Season，类型不匹配使得Blazor无法正确识别选中项，导致所有按钮都显示选中样式。
• 值传递逻辑错误：你手动维护SelectedValue并调用TestEvent，但没有正确关联EditForm的Model值，且参数传递不符合Blazor双向绑定的规范。

修复后的子组件（Child.razor） #

<h1>Child</h1>

<EditForm Model="model">
    <InputRadioGroup @bind-Value="model.Season">
        @foreach (var seasonOption in (Season[])Enum.GetValues(typeof(Season)))
        {
            <InputRadio Value="@seasonOption" />
            &nbsp;@seasonOption&nbsp;
        }
    </InputRadioGroup>
    <p>Selected Season inside Child: @model.Season</p>
</EditForm>

@code {
    [Parameter]
    public Season SelectedSeason { get; set; }

    [Parameter]
    public EventCallback<Season> SelectedSeasonChanged { get; set; }

    private Model model = new Model();

    protected override void OnInitialized()
    {
        // 初始化Model值为父组件传入的选中项
        model.Season = SelectedSeason;
        // 订阅Model值变化，同步到父组件
        model.PropertyChanged += async (sender, e) =>
        {
            if (e.PropertyName == nameof(Model.Season))
            {
                await SelectedSeasonChanged.InvokeAsync(model.Season);
            }
        };
    }

    private class Model : System.ComponentModel.INotifyPropertyChanged
    {
        private Season _season;
        public Season Season
        {
            get => _season;
            set
            {
                if (_season != value)
                {
                    _season = value;
                    OnPropertyChanged();
                }
            }
        }

        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
        }
    }

    public enum Season
    {
        Spring,
        Summer,
        Autumn,
        Winter
    }
}

修复后的父组件（Index.razor） #

<h1>Parent</h1>

<Child @bind-SelectedSeason="ChildSeason" />

<p>Season data from Child: @ChildSeason</p>

@code {
    private Child.Season ChildSeason = Child.Season.Spring; // 可选：设置默认选中项
}

关键修改说明 #

1. 统一类型绑定：InputRadioGroup直接绑定到Model的Season枚举属性，与InputRadio的Value类型一致，解决了所有按钮被选中的样式问题。
2. 双向绑定规范：使用Blazor标准的双向绑定模式，子组件定义SelectedSeason参数和对应的SelectedSeasonChanged回调，父组件通过@bind-SelectedSeason直接同步值。
3. Model属性变更通知：让Model实现INotifyPropertyChanged，当选中项变化时自动触发回调通知父组件，无需手动处理onchange事件。
4. 移除冗余逻辑：删除了手动维护SelectedValue和调用TestEvent的代码，简化了数据流。

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