如何在 MudBlazor 上覆盖 MudExpansionPanel 的 onExpand 和 onClick

Question

我试图在单击扩展面板时调用

GetComments

函数，我有两个问题，第一是当我单击打开另一个面板时面板没有关闭，第二是我无法调用该函数获取数据并显示。

这是我想要实现的目标的半伪代码，但我认为它并不完全正确，因为首先

MudExpansionPanel

没有

OnClick

道具，第二是来自 this 问题，首先我需要覆盖

@onclick:....

<MudExpansionPanels MultiExpansion="true">
  @foreach (var blog in blogs)
  {
    <MudExpansionPanel Text="@blog.Title" Onclick="() => GetComments(blog.Id)">
      @foreach (var item in data.Response)
      {
        <p>@item.Comment</p>
        <p>@item.Author</p>
      }
    </MudExpansionPanel>
  }
</MudExpansionPanels>

这是当使用给定 ID 调用

GetComments

时我想要填充的数据。

private CommentsDto data;

private async Task GetComments(int itemId)
{
    Query.Id= itemId;
    data = await Mediator.Send(Query);
}

是否有人尝试过做同样的事情或类似的事情，我们将不胜感激您的反馈。

Answer 1

最好不要将

@onclick

等事件直接应用于组件，尤其是第3方组件。由于组件由一个或多个 HTML 元素组成，您将不知道将事件附加到哪个元素。

相反，您应该使用组件公开的属性。例如

IsExpandedChanged

EventCallback 。这是一个

EventCallback<bool>

，这意味着您分配给该属性的方法将有权访问该属性的更改值。

例如如果您的方法中不需要任何其他参数，则在分配方法时将隐式声明

EventCallback<bool>

的有效负载，即

bool

。

<MudExpansionPanels>
    <MudExpansionPanel  IsExpandedChanged="ExpandedChanged">
        <!-- content -->
    </MudExpansionPanel>
</MudExpansionPanels>
@code {
    private async Task ExpandedChanged(bool newVal)
    {
        // some custom logic
    }
}

但是，由于您的方法需要其他参数，因此必须显式传递更改后的值以及其他参数。

<MudExpansionPanels MultiExpansion="true">
  @foreach (var blog in blogs)
  {
    <MudExpansionPanel Text="@blog.Title" IsExpandedChanged ="(bool changedVal) => GetComments(changedVal,blog.Id)">
        @data
    </MudExpansionPanel>
  }
</MudExpansionPanels>

@code {
    private record Blog (string Title, int Id);
    List<Blog> blogs = new()
    {
        new("One",1),
        new("Two",2),
        new("Three",3)
    };
    string data = "no data";

    private void GetComments(bool newVal,int itemId)
    {
        if(newVal)
        {
            data = $"Data changed with item:{itemId}";
            Console.WriteLine("only when its expanded");
        }
        Console.WriteLine("Method end");
    }
}

演示 👉 MudBlazor 片段