I have two components - TodoItem

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

@code {
    [Parameter]
    public string Text { get; set; } = "Learn Blazor";
    [Parameter]
    public bool Done { get; set; } = false;
      

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

and second component - TodoList

<div >
    <div >
        <h4 >Todo List</h4>
    </div>
    <div >
        @if(Todos.Count == 0)
        {
            <span>List is empty ...</span>
        }
        else{
            foreach(var todo in Todos)
            {
                <TodoItem Text="@todo.Text" Done="@todo.Done"></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 });
    }
    void CheckSuccess()
    {

        if(Todos.All(Todo => Todo.Done == true))
        {
            myClass = "alert-success";
        }
        

    }
}

And I want to do that when all the Todos are fulfilled (checked) I add a new class (@myClass). I'm a bit confused and I don't know where and how to do it.

CodePudding user response：

You need to add an EventCallback parameter to your TodoItem component to notify the TodoList when the status of a TodoItem item changes.

TodoItem.razor:

<div>
    <input value="@Done" type="checkbox" @onchange="HandleChange" />
    <span >@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; }

    private async Task HandleChange(ChangeEventArgs e)
    {
        await DoneChanged.InvokeAsync((bool)e.Value);
    }

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

Then in your TodoList component you can handle the EventCallback to update the Todo item status and call your CheckSuccess method.

TodoList.razor:

<div >
    <div >
        <h4 >Todo List</h4>
    </div>
    <div >
        @if (Todos.Count == 0)
        {
            <span>List is empty ...</span>
        }
        else
        {
            foreach (var todo in Todos)
            {
                <TodoItem Text="@todo.Text" Done="@todo.Done"
                          DoneChanged="(value) => OnDoneChanged(todo, value)"></TodoItem>
            }
        }
    </div>
</div>

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

    public string myClass = null;

    void OnNewItem(string text)
    {
        Todos.Add(new Todo() { Text = text });
    }

    void CheckSuccess()
    {
        if (Todos.All(Todo => Todo.Done == true))
        {
            myClass = "alert-success";
        }
        else
        {
            myClass = null;
        }
    }

    private void OnDoneChanged(Todo todo, bool value)
    {
        todo.Done = value;
        CheckSuccess();
    }
}