Question

我正在使用 Blazor 服务器。我有一个显示按钮的 ButtonComponent，用户可以通过模式窗口将标签作为参数传入，然后单击 Ok。一旦用户点击 Ok，输入的标签就会显示在按钮上。

如何垂直显示多个组件(ButtonComponent) 当用户一次点击一个显示按钮？

@page "/tester"

<button type="button" @onclick="() => showSignUpComponent = true">
    Show Button
</button>

@if (showSignUpComponent)
{
    <ButtonComponent label="Search" /> <hr/>
}

@code {
    bool showSignUpComponent;
}

Answer 1

与其考虑控件的集合，不如考虑Lists 需要用标记表示的对象。因此，如果您有一组需要按钮的 Label 字符串，您可以执行以下操作：

@page "/btn"

<input @bind="newLabel" />

<button type="button" @onclick="() => Labels.Add(newLabel) ">
    Spawn
</button>

@foreach (var label in Labels)
{
    @*<ButtonComponent label="@label" />*@
    <div>This would be a button with label "@label".</div>
}


@code {
    string newLabel { get; set; } = "";

    List<string> Labels = new List<string>();
}

您可以列出您想要的任何类，并根据需要交换输入/输出控件。

如何通过单击按钮动态生成 Blazor 组件？

1 个答案: