MudBlazor 表中的 RowClickEvent 调用回调后，单击的行指示就会停止工作

Question

在尝试实现和调整此

MudBlazor

表示例时：MudBlazor 示例：单击事件并显示所选行，我从

RowClickEvent

:

调用回调

private void RowClickEvent(TableRowClickEventArgs<DriveFile> _tableRowClickEventArgs)
    {
        // verify that the delegate associated with this event dispatcher is non-null
        if (OnDriveFileSelected.HasDelegate)
        {
            if (_tableRowClickEventArgs.Item != null) OnDriveFileSelected.InvokeAsync(_tableRowClickEventArgs.Item.Id);
        }
    }

一旦调用

OnDriveFileSelected.InvokeAsync

，表格就不再正确指示所选行。它应该更改所选行的背景颜色，但只有当我再次单击该行取消选择该行时，它才会更改该行的背景颜色。 一旦

OnDriveFileSelected.InvokeAsync

被移除，背景指示器就会按预期工作。 正在调用回调，是背景颜色指示不起作用。

这是我的完整代码，不包括 using 语句：

<style>
    .selected {
        background-color: #1E88E5 !important;
    }
    .selected > td {
        color: white !important;
    }
    .selected > td .mud-input {
        color: white !important;
    }
</style>


<MudTable T="DriveFile" Items="@Elements"Dense="false" Hover="true" Bordered="false" Striped="true" FixedHeader="true"
          FixedFooter="true" RowClass="cursor-pointer"  Breakpoint="Breakpoint.Sm"
          OnRowClick="RowClickEvent"
          Filter="new Func<DriveFile, bool>(FilterFunc1)"
          RowClassFunc="@SelectedRowClassFunc"
          @bind-SelectedItem="selectedItem1"
          @ref="mudTable">
    <ToolBarContent>
        <!-- <MudText Typo="Typo.h6">DriveFiles</MudText> -->
        <MudSpacer />
        <MudTextField @bind-Value="searchString1" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    <HeaderContent>
        <MudTh>File Name</MudTh>
        <MudTh>File Size</MudTh>
        <MudTh>Upload Date</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="FileName">@context.FileName</MudTd>
        <MudTd DataLabel="FileSize">@context.FileSize</MudTd>
        <MudTd DataLabel="UploadTimestamp">@context.UploadTimestamp</MudTd>
    </RowTemplate>
</MudTable>


@code {
    
        
    [Parameter]
    public EventCallback<Guid> OnDriveFileSelected { get; set; } 
    
    [Parameter]
    public string FolderOrLabelToRetrieve { get; set; }
    
    private DriveFile selectedItem1 = null;
    private string searchString1 = "";
    private bool FilterFunc1(DriveFile _DriveFile) => FilterFunc(_DriveFile, searchString1);

    private bool FilterFunc(DriveFile _DriveFile, string searchString)
    {
        if (string.IsNullOrWhiteSpace(searchString)) return true;
        
        
        if (_DriveFile.FileName.Contains(searchString, StringComparison.OrdinalIgnoreCase))
            return true;
        
        return false;
    }
    
    
    
    private int selectedRowNumber = -1;
    private MudTable<DriveFile> mudTable;
    private List<string> clickedEvents = new();
    private IEnumerable<DriveFile> Elements;

    protected override Task OnInitializedAsync()
    {
        Elements = DatabaseAbstractionLayer.GetLabelOrFolderDriveFiles("Files").ToList();
        return base.OnInitializedAsync();
    }

    private void RowClickEvent(TableRowClickEventArgs<DriveFile> _tableRowClickEventArgs)
    {
        // verify that the delegate associated with this event dispatcher is non-null
        if (OnDriveFileSelected.HasDelegate)
        {
            // if (_tableRowClickEventArgs.Item != null) OnDriveFileSelected.InvokeAsync(_tableRowClickEventArgs.Item.Id);
        }
    }

    private string SelectedRowClassFunc(DriveFile element, int rowNumber)
    {
        if (selectedRowNumber == rowNumber)
        {
            selectedRowNumber = -1;
            clickedEvents.Add("Selected Row: None");
            return string.Empty;
        }
        else if (mudTable.SelectedItem != null && mudTable.SelectedItem.Equals(element))
        {
            selectedRowNumber = rowNumber;
            clickedEvents.Add($"Selected Row: {rowNumber}");
            return "selected";
        }
        else
        {
            return string.Empty;
        }
    }

由于我在可重用组件中使用该表，并且其他组件需要对用户选择行做出反应，因此我希望此回调能够工作。

将

RowClickEvent

更改为

async method

或

async Task

和

awaiting

或不

awaiting

OnDriveFileSelected.InvokeAsync(_tableRowClickEventArgs.Item.Id);

的结果不会使行指示起作用。

有人知道如何让回调和颜色指示同时工作吗？ 非常感谢！

Answer 1

更改您的

SelectedRowClassFunc

方法（如下所示）可以解决该问题。

private string SelectedRowClassFunc(DriveFile element, int rowNumber)
{
    // if (selectedRowNumber == rowNumber)
    // {
    //     selectedRowNumber = -1;
    //     clickedEvents.Add("Selected Row: None");
    //     return string.Empty;
    // }
    // else if (mudTable.SelectedItem != null && mudTable.SelectedItem.Equals(element))
    // {
    //     selectedRowNumber = rowNumber;
    //     clickedEvents.Add($"Selected Row: {rowNumber}");
    //     return "selected";
    // }
    // else
    // {
    //     return string.Empty;
    // }
    return selectedItem1 != null && selectedItem1.Equals(element) ? "selected" : string.Empty;
}