如何关闭MudBlazor芯片

Question

我使用MudBlazor框架创建了一个简单的程序

Test.razor文件

    <MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Clicked" Class="mt-2">click</MudButton>
    <MudDivider Class="my-2"/>
    @foreach(var chip in chipText){
        <MudChip Variant="Variant.Text" Color="Color.Secondary" OnClose="Closed">@chip</MudChip>
    }
    
    @code{
    
        public string TextValue { get; set; }
        List<string> chipText=new List<string>();
    
        private void Clicked()
        {
            chipText.Add(TextValue);
            TextValue="";
            StateHasChanged();
        }
    
        void Closed(MudChip chip) {
           
           StateHasChanged();
        }
    
    
    }

​

当我在文本字段中输入文本并输入单击按钮时，我可以在芯片上显示该文本值。每个芯片都有一个关闭按钮。当我点击这个关闭按钮，它应该关闭。除了芯片关闭外，一切正常工作。我该怎么做?？

Answer 1

您需要从chip中删除相应的chipText。就像在列表中添加一个元素一样，添加一个MudChip，从列表中删除一个元素，在下一个呈现中删除一个MudChip。

<MudChip Variant="Variant.Text" Color="Color.Secondary" OnClose="@(() => Closed(chip))">@chip</MudChip>

void Closed(string chipToRemove) {
    chipText.Remove(chipToRemove);
}

我猜OnClose将自动调用StateHasChanged()，因此我们应该能够删除它。