Blazor Checkbox双向绑定和更改事件

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