从 blazor 中其他人的组件事件中的组件触发属性

Question

我有以下父剃刀组件，它是主表，它被拆分为小组件：

<div class="row">
<TopSection DeleteCss="@deleteCssStyle" />
</div>
<div class="row">
<div class="col-1">
<div>
<a href="" class="fs-4 fw-bold">
<span class="oi oi-loop-circular text-black rotate-45"></span>
</a>
</div>
<div>
<a href="" class="fs-4 fw-bold">
<span class="oi oi-account-logout text-black rotate-180"></span>
</a>
</div>
</div>
<div class="col-11">
<div class="table-responsive" id="pay-table">
<table class="table table-striped table-borderless">
<TableHeader ... />
<TableBody Items="@filteredList" OnCheckRow="@OnCheckRow" />
<TableFooter ... />
</table>
</div>
</div>
</div>

TopSection:

<div class="col-4">
<a href="javascript:void(0)" class="btn">Edit</a>
<a href="javascript:void(0)" class="btn">Add</a>
<a href="javascript:void(0)" class="btn @DeleteCss">Delete</a>
</div>

代码背后：

[Parameter]
public string DeleteCss { get; set; } = "disabled";

主OnCheckRow:

protected void OnCheckRow(int checkedRows)
{
deleteCssStyle = checkedRows > 0 ? "" : "disabled";
}

TableBody

<tbody>
@{
foreach (var row in Items)
{
<tr @onclick="@((e)=> OnCheck(row) )">
<td>
<EditForm Model="@row" class="form-check-inline">
<InputCheckbox @bind-Value="@row.IsChecked" id="@row.Id" />
</EditForm>
@row.Title
</td>
...
...
</tr>
}
}
</tbody>

和代码背后：

[Parameter]
public Action<int> OnCheckRow { get; set; } = (i) => { };
protected void OnCheck(MyItem row)
{
row.IsChecked = !row.IsChecked;
OnCheckRow?.Invoke(Items.Count(s => s.IsChecked));
}

所以，我希望在检查至少一个项目时，我希望删除按钮可用，否则添加类"；被禁用"；以避免点击

似乎在单击触发器时，deleteCsStyle的属性在TopAction组件中也没有更新，并且Delete按钮仍然被禁用。

我在这里迷路了。我想在这里帮忙。

后期编辑/分辨率

对于OnCheckRow ，我必须使用EventCallback而不是Action

[Parameter]
public EventCallback<int> OnCheckRow { get; set; }
protected async Task OnCheck(PayComponentListItem row)
{    row.IsChecked = !row.IsChecked;
await OnCheckRow.InvokeAsync(Items.Count(s => s.IsChecked));}

并且会像符咒一样工作！

Answer 1

尝试这个解决方案，您可以使用LINQ 进行测试

protected void OnCheckRow(int checkedRows)
{
deleteCssStyle = Items.Any(x=> x.Ischecked) ? "" : "disabled;
}