blazor - 将 MudBlazor 组件包装在自定义组件内 - @bind-Value 的问题

Question

我是 blazor 新手，我遇到过 MudBlazor 组件。这些都很棒，所以我决定在我的项目中实现它们。我想做的是将我使用的每个 MudBlazor 组件包装在我自己的自定义组件中，这样如果我将来更改任何内容，它都会很简单(就像已经发生的情况一样，因为我已经决定从 Radzen 更改为 MudBlazor )。在大多数情况下，这是相当简单的，但 @bind-Value 属性除外。我似乎不知道如何让它发挥作用。这是我的自定义组件，包装了 MudBlazor“MudTextField”。

<MudTextField @bind-Value="@BindTo" Label="@Label" Variant="@Variant" Margin="@Margin"></MudTextField>

@code {
    private string bindingValue;

    [Parameter]
    public string BindTo
    {
        get => bindingValue;
        set
        {
            if (bindingValue == value) return;
            bindingValue = value;
            BindToChanged.InvokeAsync(value);
        }
    }

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

    [Parameter] public string Label { get; set; }

    [Parameter] public Variant Variant { get; set; } = Variant.Outlined;

    [Parameter] public Margin Margin { get; set; } = Margin.Dense;
}

这不起作用。当我在调用自定义组件时设置 BindTo 参数时，我可以看到 set 属性中的代码被调用，并且 BindingValue 已正确设置，但我绑定(bind)到的对象上的属性未更新。我需要对 BindToChanged 参数执行其他操作吗？我在研究这个问题时看到另一个例子中使用了它，但我不太明白它应该做什么。任何帮助将不胜感激。

谢谢!

Answer 1

您需要将 Value、ValueChanged 和 ValueExpression 传递到 MudBlazor 组件。

我不使用 MudBlazor，所以无法正确测试它，我只知道如何将其构建为 RenderFragment，而不是在 Razor 中，但类似这样的东西应该可以工作:

    public class MyMudBlazorTextField<TValue> : ComponentBase
    {
        [Parameter]
        public TValue? Value { get; set; }

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

        [Parameter] public Expression<Func<TValue>>? ValueExpression { get; set; }

        [Parameter] public string Label { get; set; }

        [Parameter] public Variant Variant { get; set; } = Variant.Outlined;

        [Parameter] public Margin Margin { get; set; } = Margin.Dense;

        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenComponent<MudTextField<TValue>>(0);
            builder.AddAttribute(1, "Variant", this.Variant);
            builder.AddAttribute(2, "Margin", this.Margin);
            builder.AddAttribute(3, "Label", this.Label);
            builder.AddAttribute(4, "Value", this.Value);
            builder.AddAttribute(5, "ValueChanged", EventCallback.Factory.Create(this, this.ValueChanged));
            builder.CloseComponent();
        }
    }

然后您可以使用普通的@bind-value

<MyMudBlazorTextField @bind-value=myfield ...../>

你可能付出了很多努力却毫无结果。像 Variant 和 Margin 这样的东西都是 MudBlazor 特有的，而 MudBlazor 有一些构建东西的特定方法，所以除非你在你的组件中修复这些，否则你就是在你的通用组件上搞混了(原谅双关语)!

更新

我从 MudBlazor Dashboard 项目的 Account 页面中提取了一些代码。它使用以下函数设置文本字段:

        public static void CreateMudTextField_0<T>(global::Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder, int seq, int __seq0, global::System.String __arg0, int __seq1, global::MudBlazor.Variant __arg1, int __seq2, T __arg2, int __seq3, global::Microsoft.AspNetCore.Components.EventCallback<T> __arg3)
        {
        __builder.OpenComponent<global::MudBlazor.MudTextField<T>>(seq);
        __builder.AddAttribute(__seq0, "Label", __arg0);
        __builder.AddAttribute(__seq1, "Variant", __arg1);
        __builder.AddAttribute(__seq2, "Value", __arg2);
        __builder.AddAttribute(__seq3, "ValueChanged", __arg3);
        __builder.CloseComponent();
        }

在此基础上我对代码做了一些调整。