案例1
@page "/counter"
@inject IJSRuntime JS
<h1>Counter</h1>
<p id="currentCount">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick='mouseEvent => HandleClick(mouseEvent, "Hello")'>Click me</button>
@code {
private int currentCount = 0;
private async Task HandleClick(MouseEventArgs e, string msg)
{
if (e.CtrlKey)
{
await JS.InvokeVoidAsync("alert", msg);
currentCount += 5;
}
else
{
currentCount++;
}
}
}
案例2
<div @onclick="HandleDivClick">
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<input value=@data @onkeypress="ProcessKeyPress" @onkeypress:preventDefault />
</div>
@code {
private async Task HandleDivClick()
{
await JS.InvokeVoidAsync("alert", "Div click");
}
private async Task ProcessKeyPress(KeyboardEventArgs e)
{
}
private int currentCount = 0;
private void IncrementCount(MouseEventArgs e)
{
}
}
总结
- Blazor 默认不会自动传递额外参数,如果事件处理方法需要多个参数,就需要用 lambda 表达式 来手动传递。
mouseEvent => HandleClick(mouseEvent, "Hello") 让我们既能接收 MouseEventArgs,又能传入 "Hello"。
- 如果事件处理方法只需要
MouseEventArgs,就可以直接写 @onclick="HandleClick",不需要 lambda 表达式。