c# - Blazor WASM - 防止子组件被点击

Question

我正在制作一个简单的 ASP.NET Blazor WASM 项目，其中包含一个折叠面板列表，如此屏幕截图所示。 折叠面板是不涉及 javascript 的 blazor 组件。目前，当我单击面板顶部的按钮时，它会触发下面面板的折叠更改。我必须对折叠面板组件进行哪些更改，以便它们不受单击父元素（例如按钮）的影响？

索引.razor

<Accordion @ref="_accordion" id="ac1" ActiveCollapsePanel="@_activePanel" OnCollapsePanelChanged="OnAccordionChanged" >
    <CollapsePanels>
        @foreach (var box in boxes)
        {
            <CollapsePanel style="margin-bottom: 10px;" CollapsedColor="@_accordionCollapsedColor" ExpandedColor="@_accordionExpandedColor" HoverColor="@_accordionHoverColor"  Animate="@_isAnimated" ShowContentOverflow="true"  ContentHeight="0">
                <CollapsedHeaderContent>
                    <div class="w-100">
                        <h5>@box.Hostname | @box.Ip</h5>
                        <button class="btn btn-success">Click me</button>
                         ...
                    </div>
                </CollapsedHeaderContent>
                <ExpandedHeaderContent>
                    <div class="w-100">
                        <h5>@box.Hostname | @box.Ip </h5>
                        <button class="btn btn-success">Click me</button>
                        ...
                    </div>
                </ExpandedHeaderContent>
                ...

CollapsePanel.razor

<div @ref="_inputRef" class="collapsePanel" tabindex="200" disabled="@Disabled" @attributes=AllOtherAttributes>
    @if (Collapsed)
    {
        <div id="@($"collapse_{_componentId}")" class="collapseHeader collapsed @(Animate ? "animate" : "")" @onclick="ExpandCollapse">
            @(CommonHeader ?? CollapsedHeaderContent)
        </div>
    }
    else
    {
        <div id="@($"collapse_{_componentId}")" class="collapseHeader expanded @(Animate ? "animate" : "")" @onclick="ExpandCollapse">
            @(CommonHeader ?? ExpandedHeaderContent)
        </div>
    }
    <div class="collapseContent @(Animate ? "animate" : "")"
         style="opacity: @(Collapsed ? "0" : "1"); max-height: @GetContentHeight(); overflow: @(ShowContentOverflow ? "auto" : "hidden");">
        @Content
    </div>
</div>

折叠面板的代码取自这个github。

标签： c#blazor-webassemblyasp.net-core-5.0