Blazor InputCheckbox @onchange事件不工作

Question

我在。razor页面上有一个Blazor表单:

<EditForm Model="@myModel" OnValidSubmit="@doThis">
<InputCheckbox class="someClass" id="someId" @bind-value="booleanValue" @onchange="e=>{doSomething(e);}"></InputCheckbox>
</EditForm>
@code {
public MyModel myModel = new MyModel();
public bool booleanValue = true;
public void doSomething(ChangeEventArgs e) {
// Stuff here ...
}
public async Task doThis(){
// Stuff here ...
}
}

当我在public void DoSomething设置断点时，它永远不会被击中。

然而，如果我将@onchange更改为@onclick,public void DoSomething方法每次都会被击中。唯一的问题是@onclick没有让我知道发生了什么变化，意思是"点击到"。未点击还是未点击->clicked" .

那么，为什么@onchange事件永远不会触发，我怎么能让它工作?

Answer 1

@bind-Value在Blazor复选框上覆盖OnChange。如果你正在使用。net 7，你可以使用@bind-Value:after="e=>{doSomething(e);}".

如果你不是在。net 7，你可以设置booleanValue作为一个属性，并使用你的set块;以确定它是否被更改并相应地调用doSomething(e):

private bool _booleanValue;
protected bool booleanValue {
get{ return _booleanValue; }
set
{
if(value != _booleanValue) doSomething(e);
_booleanValue = value;
}
} 

Answer 2

实现这一点的最好和最简单的方法是这样做:

<input class="someClass" id="someId" type="checkbox" checked="@booleanValue" 
@onchange="(e) => doSomething(e)"/>

使用InputCheckBox，如果你需要使用@onchange，你可以遵循这个例子，我有一个自动生成的形式，这是复杂的InputCheckBox可以得到:

@foreach (var obj in associate.ExtraInfoValues)
{
....
else if (key.Type == Enums.ExtraInfo.Type.Bool)
{
bool tmp = false;
<div class="col-1 extraInfo">
<label>@key.Key:</label>                            
<InputCheckbox id="@key.Key" class="form-control" TValue="bool?" ValueExpression="() => tmp" Value="Convert.ToBoolean(obj.Value)" ValueChanged="((arg) => obj.Value = arg.ToString())" />
</div>                            
} 
}

对于你的情况，如果它只是一个简单的bool值，你可以这样使用:

<InputCheckbox id="someId" class="someClass" TValue="bool" ValueExpression="() => booleanValue" Value="booleanValue" ValueChanged="((e) => doSomething(e))" />