C#Blazor待辦事項串列更改樣式，全部選中時

我有兩個組件-TodoItem

<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;
      

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

第二個組成部分 -TodoList

<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)
            {
                <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";
        }
        

    }
}

我想在所有待辦事項都完成（選中）后添加一個新類（@myClass）。我有點困惑，我不知道在哪里以及如何去做。

uj5u.com熱心網友回復：

您需要在組件中添加一個EventCallback引數以TodoItem通知專案TodoList狀態何時TodoItem更改。

TodoItem.razor：

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

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

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

然后在您的TodoList組件中，您可以處理EventCallback更新Todo專案狀態并呼叫您的CheckSuccess方法。

TodoList.razor：

<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)
            {
                <TodoItem Text="@todo.Text" Done="@todo.Done"
                          DoneChanged="(value) => OnDoneChanged(todo, value)"></TodoItem>
            }
        }
        <NewItemEntry OnNewItem="@OnNewItem"></NewItemEntry>
    </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();
    }
}

標籤：C＃asp.net 核心西装外套

上一篇：在ASP.NETCore的重置密碼中回傳Null

下一篇：ASP.NET核心MVC RazorPOST控制器回傳“錯誤請求”