Blazor 处理复选框切换

Posted 2023-03-30

【中文标题】Blazor 处理复选框切换

【英文标题】：Blazor Handling Checkbox Toggle

【发布时间】：2021-04-25 02:47:57

【问题描述】：

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

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

在此先感谢，这是我目前正在做的事情，但未在已完成的视图中显示已选中。

待办事项组件

@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，这将是我对文本输入类型的方法，但它不适用于复选框。

我觉得使用绑定是要走的路，但我不知道如何在使用绑定时选择复选框。

【参考方案1】：

你痛苦地接近了。

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

Blazor 将采用 checked="@someboolean" 并正确渲染“已检查”或什么都不渲染。我不记得我为什么使用@onclick，但这是来自实时和工作代码，所以希望它对你有用。

【讨论】：

这行得通，你的权利，我痛苦地接近了哈哈。非常感谢。