Blazor TodoList组件：全部勾选时添加样式类的实现咨询

1. 让TodoItem支持Done状态的双向绑定 #

原TodoItem组件的Done参数是单向传递的，勾选复选框后父组件的Todo对象不会同步更新。需要添加对应的EventCallback实现双向绑定：

<div>
    <input @bind="Done" type="checkbox"/>
    <span class="@textStyle">@Text</span>
</div>

@code {
    [Parameter]
    public string Text { get; set; } = "Learn Blazor";
    
    [Parameter]
    public bool Done { get; set; } = false;
    
    // 双向绑定所需的回调
    [Parameter]
    public EventCallback<bool> DoneChanged { get; set; }

    string textStyle => Done ? "done" : "";
}

2. 在TodoList中绑定状态并触发检查逻辑 #

在TodoList渲染TodoItem时，使用@bind-Done语法绑定到每个Todo对象的Done属性，同时在状态变化和添加新项时触发检查：

<div class="card">
    <div class="card-header @myClass">
        <h4 class="card-title">Todo List</h4>
    </div>
    <div class="card-body">
        @if(Todos.Count == 0)
        {
            <span>List is empty ...</span>
        }
        else{
            foreach(var todo in Todos)
            {
                <!-- 双向绑定Done状态，变化时触发检查 -->
                <TodoItem Text="@todo.Text" @bind-Done="@todo.Done" 
                          @onchange="CheckSuccess"></TodoItem>
            }
        }
        <NewItemEntry OnNewItem="@OnNewItem"></NewItemEntry>
    </div>
</div>

@code {
    [Parameter]
    public IList<Todo> Todos { get; set; } = new List<Todo>();

    public string myClass = "";

    void OnNewItem(string text)
    {
        Todos.Add(new Todo() { Text = text });
        // 添加新项后检查完成状态
        CheckSuccess();
    }

    void CheckSuccess()
    {
        // 空列表时清空样式
        if (Todos.Count == 0)
        {
            myClass = "";
            return;
        }
        
        // 检查所有Todo是否完成
        myClass = Todos.All(todo => todo.Done) ? "alert-success" : "";
        
        // 若UI未自动更新，可手动调用StateHasChanged()
        // StateHasChanged();
    }

    // 组件初始化时检查一次状态
    protected override void OnInitialized()
    {
        CheckSuccess();
        base.OnInitialized();
    }
}

核心要点 #

• 双向绑定：通过@bind-Done和DoneChanged回调，确保复选框状态同步到父组件的Todo对象。
• 触发时机：每个Todo项状态变化时、添加新Todo项时、组件初始化时，都调用CheckSuccess检查全部完成状态。
• 样式重置：CheckSuccess中处理了未全部完成的情况，避免成功样式残留。

内容的提问来源于stack exchange，提问作者Cesc