Blazor复选框双向绑定和更改事件

Question

绑定复选框并在复选框更改时触发事件的正确方法是什么？我尝试了几种不同的方法，但都没有像我希望的那样奏效。请注意，复选框位于组件中。

<input type="checkbox" checked="@IsChecked" @onchange="CheckboxChanged">
@code{
[Parameter]
public bool IsChecked { get; set; } = true;
private void CheckboxChanged()
{
Console.WriteLine($"Checkbox changed {IsChecked}");
}
}

当页面加载时，它读取给定给IsChecked的值，并且当选中CheckBox时，该方法将激发。但是，IsChecked的值不会更新。然后，如果IsChecked的绑定值在组件外发生更改，则该方法不会激发，但IsChecked的值会发生更改(应注意，UI已正确更新(。

我想我需要一个像这样的实际绑定：

<input type="checkbox" @bind="IsChecked" @onchange="CheckboxChanged" >

然而，这给出了一个错误，即onchange被使用了两个或多个

<input type="checkbox" @bind="IsChecked" @onclick="CheckboxChanged" >

但是，当用户单击复选框时，它确实会激发该方法，IsChecked处于旧值(我假设单击发生在绑定之前(。然后，如果IsChecked的值在组件外部发生更改，则该方法不会再次激发。

正确的方法是什么？

Answer 1

您的代码/组件有两个问题：

1. 您不应该在代码中修改[Parameters]。只要组件更新，就会设置这些值
2. 绑定使用OnChanged事件来更新isChecked，因此您不能也使用它

以下是有效的注释代码。

1. 使用内部字段来保持复选框状态
2. 连线OnInput事件

@page "/"
<input type="checkbox" checked="@isChecked" @oninput="CheckboxChanged">
@code{
[Parameter]
public bool IsChecked { get; set; } = true;
// Internal field holding checkbox state
private bool isChecked;
// updates the internal value whwenever the component is updated
// You may not want that??
protected override void OnParametersSet()
{
isChecked = this.IsChecked;
}
private void CheckboxChanged(ChangeEventArgs e)
{
// get the checkbox state
var value = e.Value;
Console.WriteLine($"Checkbox changed {IsChecked}");
}
}

Answer 2

从.NET 7开始，您可以在更改事件发生后使用@bind-value:after来处理它。

<input type="checkbox" @bind-value="@IsChecked" @bind-value:after="CheckboxChanged">
@code{
[Parameter]
public bool IsChecked { get; set; } = true;
private void CheckboxChanged()
{
Console.WriteLine($"Checkbox changed {IsChecked}");
}
}

Answer 3

还有一个InputCheckbox控件：

<InputCheckbox @bind-Value=@boolProperty />

这正确地双向绑定到类型为bool(不可为null(的属性。注意@bind-Value中的大写字母V。

此控件需要位于EditForm控件内部。

Answer 4

就像前面提到的@hans-kesting一样，您可以使用InputCheckbox。如果你想在值更改事件上有一个自定义逻辑，你可以通过以下方式实现：

<InputCheckbox ValueChanged="@((e) => CheckboxChanged(e))" ValueExpression="@(() => IsChecked)"/>

请注意，不能同时使用@bind-Value和ValueChanged。这就是为什么CCD_ 18和CCD_。