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

您的 code/component 有两个问题：

您不应在代码中修改 [Parameters]。这些在组件更新时设置。
绑定使用OnChanged事件来更新isChecked，所以你不能同时使用它。

这是有效的注释代码。

使用内部字段来保存复选框状态。
连接 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

还有一个InputCheckbox控件：

  <InputCheckbox @bind-Value=@boolProperty />

这正确 two-way 绑定到类型 bool (non-nullable) 的属性。注意@bind-Value.

中的大写V

此控件需要在 EditForm 控件内。

Blazor Checkbox 双向绑定和更改事件

Blazor Checkbox two-way binding and change event

c#

blazor

blazor-server-side