问答 Blazor：使用单选按钮进行双向数据绑定答案

【问题标题】：Q & A Blazor: Two-way data binding with Radio Button问答 Blazor：使用单选按钮进行双向数据绑定
【发布时间】：2023-01-11 04:17:43
【问题描述】：

我正在编写一个 blazor 应用程序，用户必须在其中以单选按钮的形式选择一组选项。此选择需要在组件内部完成。这也意味着，我需要将数据从子组件中的无线电组传递到父组件。

考试

以下是子组件和父组件的代码 sn-ps。该测试涉及在子组件中选择四个季节（春季、夏季、秋季和冬季）之一。当用户选择四个季节中的任何一个时，该选择也需要在父组件中更新。

试图
第一次尝试是使用Editform。

这是子组件。 Pages\Child.razor

<h1>Child</h1>

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

@code {
    [Parameter]
    public string SelectedValue { get; set; } = "No seasons selected.";

    [Parameter]
    public EventCallback<string> TestEvent { get; set;  }

    Model model = new Model();

    class Model
    {
        public Season Season { get; set; }
    }

    enum Season
    {
        Spring,
        Summer,
        Autumn,
        Winter
    }

    private async Task UpdateSelection()
    {
        SelectedValue = model.Season.ToString();
        await TestEvent.InvokeAsync(SelectedValue);
    }
}

和父组件index.razor

<h1>Parent</h1>

<Child TestEvent=@UpdateChildSeason />

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

@code
{
    string ChildSeason;

    void UpdateChildSeason(string value)
    {
        ChildSeason = value;
    }
}

这不能正常工作。我不将数据传递给父母

附：同时，如果我选择任何一个单选按钮，所有的单选按钮都会被绿色按钮覆盖。

我不知道为什么会这样。

【问题讨论】：

标签： c# radio-button blazor two-way-binding

【解决方案1】：

所以，我的解决方案是不使用EditForm。好吧，因为我不担心数据验证，所以我现在可以取消 EditForm。

这是我的解决方案。

这是子组件。 PagesChild.razor

<p>Please select your choice.</p>
@foreach (var seasonOption in (Season[])Enum
   .GetValues(typeof(Season)))
{
    <label>
        <input type="radio"
           name="seasonOption"
           value="@seasonOption"
           onchange="@OnValueChanged" />
        @seasonOption.ToString()
    </label>   
}
<br />
<p>SelectedValue: @SelectedValue</p>


@code {

    [Parameter]
    public string SelectedValue { get; set; } = "No season selected.";

    [Parameter]
    public EventCallback<string> SelectedValueChanged { get; set; }
    enum Season
    {
        Spring,
        Summer,
        Autumn,
        Winter
    }

    private Task OnValueChanged(ChangeEventArgs e)
    {
        SelectedValue = e.Value.ToString();
        return SelectedValueChanged.InvokeAsync(SelectedValue);
    }

}

和父组件index.razor

<Child2 @bind-SelectedValue="childData" />

<p>Data from Child: @childData</p>

@code
{
    string childData = "No child data.";
}

现在，数据终于传给父级了。这现在对我有用。有没有人有EditForm 版本的解决方案以及如何从单选按钮中删除绿色框？

【讨论】：