Blazor InputCheckbox组件@onchange事件不触发问题排查与解决

为什么@onchange不触发 #

Blazor的InputCheckbox是官方封装的表单组件，它内部已经接管了原生的change事件，用来同步绑定值的状态。你直接在组件上添加@onchange时，这个自定义事件会被组件内部的事件处理逻辑覆盖，导致你的doSomething方法永远不会被执行。而@onclick是DOM元素的原生点击事件，组件没有拦截这个事件，所以每次点击都会触发，但它无法直接提供复选框状态切换的具体方向（选中→未选中或反之）。

解决办法 #

方法1：通过属性Setter监听状态变化

把原本的booleanValue字段改成属性，在setter中处理状态变化逻辑，这样每次绑定值更新时都会触发：

<EditForm Model="@myModel" OnValidSubmit="@doThis">
    <InputCheckbox class="someClass" id="someId" @bind-value="BooleanValue"></InputCheckbox>
</EditForm>

@code {
    public MyModel myModel = new MyModel();

    private bool _booleanValue = true;
    public bool BooleanValue
    {
        get => _booleanValue;
        set
        {
            if (_booleanValue != value)
            {
                _booleanValue = value;
                doSomething(value); // 直接传入最新状态
            }
        }
    }

    public void doSomething(bool newValue) {
        // newValue为true代表复选框被选中，false代表未选中
        // 在这里处理你的逻辑
    }

    public async Task doThis(){
        // 表单提交逻辑
    }
}

方法2：使用InputCheckbox的ValueChanged回调

放弃@bind-value语法糖，手动绑定Value、ValueChanged和ValueExpression，这样可以直接在回调中获取最新状态：

<EditForm Model="@myModel" OnValidSubmit="@doThis">
    <InputCheckbox class="someClass" id="someId" 
                   Value="@booleanValue" 
                   ValueChanged="@((bool newValue) => HandleValueChange(newValue))"
                   ValueExpression="@(() => booleanValue)"></InputCheckbox>
</EditForm>

@code {
    public MyModel myModel = new MyModel();

    public bool booleanValue = true;

    public void HandleValueChange(bool newValue) {
        booleanValue = newValue; // 手动更新绑定的值
        // 这里可以根据newValue处理状态变化逻辑
    }

    public async Task doThis(){
        // 表单提交逻辑
    }
}

方法3：绑定到Model的属性并在Model内部处理

如果这个复选框的值属于MyModel的一部分，直接绑定到模型属性，然后在Model的属性Setter中处理变化：

<EditForm Model="@myModel" OnValidSubmit="@doThis">
    <InputCheckbox class="someClass" id="someId" @bind-value="myModel.IsChecked"></InputCheckbox>
</EditForm>

@code {
    public MyModel myModel = new MyModel();

    public async Task doThis(){
        // 提交时可以直接获取myModel.IsChecked的状态
    }
}

// MyModel类
public class MyModel
{
    private bool _isChecked;
    public bool IsChecked
    {
        get => _isChecked;
        set
        {
            if (_isChecked != value)
            {
                _isChecked = value;
                // 在这里处理状态变化逻辑，比如触发通知或执行操作
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Brian