将图标添加到 Blazor 中的无线电组

Question

我想在单选组的选项中混合使用图标和文本，例如：我的代码是这样的：

.rm-input-radio-group {
    display: flex;
    flex-direction: row;
    height: 100px;
}

    .rm-input-radio-group img {
        margin-left: 10px;
        margin-right: 10px;
    }

<div class="rm-input-radio-group">
    <EditForm Model="@rdOptions">
        <InputRadioGroup @bind-Value="@SelectedValue">
            @foreach (var option in rdOptions)
            {
                <InputRadio Value="@option.Value" /> <img src=@option.IconPath /> @option.Text <br />
            }
        </InputRadioGroup>
    </EditForm>
</div>

and the backend code:

[Parameter] public ProposalStatusType SelectedValue { get; set; } = ProposalStatusType.UnderReview;

readonly List<InputRadioGroupItemModel<ProposalStatusType>> rdOptions = new()
        {
            new InputRadioGroupItemModel<ProposalStatusType>(ProposalStatusType.UnderReview, "Currently being reviewed", "css/svg/icon-in-progress.svg"),
            new InputRadioGroupItemModel<ProposalStatusType>(ProposalStatusType.Disliked, "Dislike Proposal Option", "css/svg/icon-thumbdown.svg"),
            new InputRadioGroupItemModel<ProposalStatusType>(ProposalStatusType.Preferred, "Preferred Proposal Option", "css/svg/icon-thumbup.svg"),
            new InputRadioGroupItemModel<ProposalStatusType>(ProposalStatusType.AvailableForBooking, "Available for Booking Request", "css/svg/icon-bookings.svg"),
        };

但是，SelectedValue 在父组件中的组件调用中始终保持 default/given 值。我错过了什么吗？

Answer 1

我认为问题出在对 selectedValue 使用 [parameter]。父级在重新渲染时覆盖该值。

看这里Blazor documentation about Overwritten parameters

使用在 OnInitialized() 中接收初始值的局部变量

Answer 2

感谢 Shuryno 的提示，这是真的，我必须通过首先添加 [Parameter] public EventCallback<OptionStatusType> OnSelectedValueChange { get; set; } 来修改我的代码，它可以在选择更改时通知 Parent 组件（类似于：<RMInputRadioGroup SelectedValue="@SelectedOptionStatus" OnSelectedValueChange="OnSelectedValueChange" CanApprove="@CanApprove"></RMInputRadioGroup> 在 parent 方面）并且还将 child html 重构为：

<div class="rm-input-radio-group">
    <EditForm Model="@RadioGroupItemModel">
        <InputRadioGroup Value="@SelectedValue" ValueChanged="@((OptionStatusType v) => ValueChanged(v))" ValueExpression="@( () => RadioGroupItemModel.Value )">
            @foreach (var option in rdOptions)
            {
                <InputRadio Value="@option.Value" style="outline: none !important;"/> <img src=@option.IconPath /> @option.Text <br />
            }
        </InputRadioGroup>
    </EditForm>
</div>

您可以看到我定义了一个更合适的模型，称为 RadioGroupItemModel，例如：

protected InputRadioGroupItemModel<OptionStatusType> RadioGroupItemModel { get; set; }

而 class 是：

public class InputRadioGroupItemModel<T>
    {
        #region Public Properties

        public string Text { get; set; }
        public string IconPath { get; set; }
        public T Value { get; set; }

        #endregion Public Properties

        #region Public Constructors

        public InputRadioGroupItemModel()
        {
        }

        public InputRadioGroupItemModel(T value, string text, string iconPath)
        {
            Value = value;
            Text = text;
            IconPath = iconPath;
        }

        #endregion Public Constructors
    }

而且正如您在代码中看到的那样，我不得不将 @bind-Value="@SelectedValue" 替换为 Value="@SelectedValue" ValueChanged="@((OptionStatusType v) => ValueChanged(v))" ValueExpression="@( () => RadioGroupItemModel.Value )"，其中

protected void ValueChanged(OptionStatusType value)
        {
            OnSelectedValueChange.InvokeAsync(value);
        }

这非常有效，但请记住，您需要覆盖 InputRadio 上的样式（我做了 style="outline: none !important;"），因为 Blazor EditForm 会自动添加一个有效的 CSS class将在 radio-buttons.

周围添加边框的运行时

将图标添加到 Blazor 中的无线电组

adding icons to a radio group in Blazor

html

c#

blazor

blazor-webassembly