Blazor处理复选框切换

Question

我正在通过构建一个简单的todo应用程序来学习Blazor表单控件。遇到一个问题，我不知道如何处理复选框单击，因为我不能在同一个表单控件中同时使用@bind和@onchange。我可以只使用onchange，它可以工作，但在查看已标记为完成的项目时，它不会自动选中复选框。

有人能帮我解释一下我如何动态处理选中或取消选中的复选框，并将布尔值绑定到它吗？

提前感谢，这是我目前正在做的事情，在完成的视图中没有显示已检查。

Todo组件

@using Project.Shared.Models
@inject HttpClient Http
<div><input type="checkbox" @onchange="CheckChanged" />@todo.Name</div>
@code {
[Parameter]
public Todo todo { get; set; }
private async Task CheckChanged()
{
todo.Complete = !todo.Complete;
await Http.PutAsJsonAsync("/api/Todo/Edit", todo);
}
}

就像我所说的那样，当我单击复选框时，它将通过API更改数据库中的布尔值，但在查看已完成的项目时不会选中该复选框。当我这样做时，它会选中已完成项目的复选框，但在单击时不会选中。

<div><input type="checkbox" @bind="todo.Complete" />@todo.Name</div>

我还尝试使用value，这将是我对文本输入类型的方法，但它不适用于复选框。

我觉得使用绑定是一种方法，但我不知道如何在使用绑定时选中复选框。

Answer 1

你非常接近。

<input type="checkbox" checked="@todo.Complete" @onclick="CheckChanged"/>@todo.Name</div>

Blazor将取CCD_ 1；"已检查"；或者什么都不做。我不记得我为什么使用@onclick，但这是来自实时和工作代码，所以希望它对你有用。