从 Blazor 中的动态组件获取价值

Question

我正在尝试使用.net 6中发布的新动态组件功能。我已经观看了youtube上的所有视频并完成了示例。我似乎无法弄清楚如何从组件中获取值。我使用了与事件绑定在一起的动态组件的参数属性，但我的用例是将一堆动态组件加载到页面上，并且提交按钮是父页面的一部分，而不是动态组件的一部分。单击提交时，我只需要父页面上文本框动态组件的值。这是一个例子：

文本框组件

@Label: <input type="text" style="margin: 5px;" @bind-value="@TextBoxValue"/> 
@code{
    public string Label { get; set; }
    public string TextBoxValue { get;set; }
    protected override Task OnInitializedAsync()
    {
        return base.OnInitializedAsync();
    }
}

索引页：

@page "/"
@if (type != null)
{
        <DynamicComponent Type="type"  />
}

<button class="btn btn-primary" @onclick="SaveToDatabase">Submit</button>

@code {
    Type type;

    protected async override Task OnInitializedAsync()
    {
        type = typeof(TextBoxComponent);
    }

    private void SaveToDatabase()
    {
        // get the text value of the dynamic component and insert into db
    }
}

我尝试创建一个名为 Appstate 的对象并分配一个字符串属性，但仍然无法获取该值。

Answer 1

要了解 Blazor，我推荐官方文档。我下面描述的内容直接来自文档。

我用两种方式修改了你的示例：

1. 一种方法是使用

   @ref

   获取对组件的引用，然后访问

   TextBoxValue

   属性。一旦获得了对该组件的引用，您就可以像这样访问

   TextBoxValue

   属性：

   (dc?.Instance as TextBoxComponent)?.TextBoxValue;

   *请注意，

   ?

   是因为我使用的是可空引用类型。

2. 第二种方法是通过传递

   EventCallBack

   参数来连接

   Parameters

   。

我还添加了两个文本字段，

Text1

和

Text2

，以便您在运行此示例时可以看到更新是如何完成的。

---

@Label: <input type="text" style="margin: 5px;" @bind-value="@TextBoxValue" @oninput=OnInputCallBack /> 

@code{
    public string? Label { get; set; }
    public string? TextBoxValue { get; set; }

    protected override Task OnInitializedAsync()
    {
        return base.OnInitializedAsync();
    }

    [Parameter]
    public EventCallback<ChangeEventArgs> OnInputCallBack { get; set; }
}

---

@page "/"

@if (type != null)
{
    <DynamicComponent Type="type" @ref="dc" Parameters="parameters" />
}

<button class="btn btn-primary" @onclick="SaveToDatabase">Submit</button>

<h3>@Text1</h3>

<h3>@Text2</h3>

@code {
    Dictionary<string, object>? parameters;
    Type? type;
    DynamicComponent? dc;
    string? Text1;
    string? Text2;

    protected override void OnInitialized()
    {
        parameters = new() { { "OnInputCallBack", EventCallback.Factory.Create<ChangeEventArgs>(this, GetInput) } };
        type = typeof(TextBoxComponent);
    }

    private void GetInput(ChangeEventArgs e)
    {
        Text2 = (string?)e.Value;
    }

    private void SaveToDatabase()
    {
        Text1 = (dc?.Instance as TextBoxComponent)?.TextBoxValue;
    }
}

Answer 2

当我渲染 DynamicComponents 列表时，您有任何解决方案或示例吗？像这样

@if (dynamicComponents != null)
{
    @foreach (var item in dynamicComponents.ToList())
    {
         <RadzenRow>    
             <DynamicComponent Type="item.Type" Parameters="@item.Parameters"> 
             </DynamicComponent>
         </RadzenRow>
     }
}

如何获取每个动态组件的value属性？

也许我可以使用 ID 或名称？