Question

来自asp.net网络表单，我总是有些疑问如何在Blazor中完成某些任务，而没有一个引用控件或组件的唯一ID。

假设我有一个自定义组件MyCard（一个简单的引导卡），它公开了Visible属性

<div class="card mb-3 @display" style="width: 18rem;">
    <div class="card-body">
        @ChildContent
    </div>
</div>


@code {
    string display = "";

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private bool _visible = true;
    [Parameter]
    public bool Visible
    {
        get
        {
            return _visible;
        }
        set
        {
            _visible = value;
            display = value ? "" : "d-none";
        }
    }

}

然后我在页面上使用多个

@page "/"

<h1>Hello, world!</h1>

<MyCard Visible="@hidetoggles[0]">First Card</MyCard>

<MyCard Visible="@hidetoggles[1]">Second Card</MyCard>

<MyCard Visible="@hidetoggles[2]">Third Card</MyCard>

<button @onclick="Hide">Hide the 2nd card</button>

@code
{
    bool[] hidetoggles = new bool[] { true, true, true };

    void Hide()
    {
        hidetoggles[1] = false;
    }
}

是否有一种更优雅的方法来设置特定实例（例如第二个实例）的属性，而不是我所做的？

MyCard中的ID属性有用吗？

谢谢

Answer 1

引用Capture references to components文档：

组件引用提供了一种引用组件实例的方法，以便您可以向该实例发出命令，例如 Show 或 Reset 。要捕获组件参考：


向子组件添加.as-console-wrapper { max-height: 100% !important; top: 0; }属性。

定义与子组件相同类型的字段。

输入您的代码

MyCard.razor：

@ref

Index.razor：

<div class="card mb-3 @display" style="width: 18rem;">
    <div class="card-body">
        @ChildContent
    </div>
</div>

@code {
    string display = "";

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public void setVisible(bool visible)
    {
        if(visible)
        {
            display = "";
        }
        else
        {
            display = "d-none";
        }
    }
}

更多信息，请访问Blazor Binding, Events and Parameters。

Answer 2

如果您的要求是仅在单击卡时隐藏卡，则可以执行以下操作。

MyCard.razor

<div style="@Display" @onclick="Hide">
    This is CardNumber-@CardNumber
</div>

@code{
    [Parameter]
    public int CardNumber { get; set; }
    public string Display{ get; set; }

    public void Hide()
    {
        //By using this keyword you can access the clicked instance. ex: this.CardNumber
        Display = "display:none";
    }
}

Index.razor

@for (int i = 0; i < 5; i++)
{
<MyCard CardNumber="i" />
}

如何获得自定义Blazor组件的特定实例

2 个答案: