Blazor 怎么处理按钮点击事件

来源:这里教程网 时间:2026-02-21 17:38:42 作者:

Blazor 处理按钮点击事件非常直接,核心就是用

@onclick
绑定一个 C# 方法,点击时自动触发执行。

基础写法:无参方法直接绑定

最常用也最简单的形式是把一个无参数的 void 方法名直接赋给

@onclick

<button>点我</button>
@code
块里定义对应方法:
private void HandleClick() { Console.WriteLine("按钮被点了"); }

带事件参数:获取鼠标或键盘信息

如果需要知道点击位置、按键状态等细节,方法可以接收 Blazor 提供的事件参数类型:

点击类事件(如
@onclick
)默认对应
MouseEventArgs
写法示例:
private void HandleClick(MouseEventArgs e) { Console.WriteLine($"X={e.ClientX}, Y={e.ClientY}"); }
其他常见参数类型:
KeyboardEventArgs
(用于
@onkeypress
)、
ChangeEventArgs
(用于
@onchange

传自定义参数:用 Lambda 表达式包装

当你要传入固定值(比如 ID、名称)给处理方法时,不能直接写

@onclick="HandleClick("abc")"
,得用 Lambda:

<button> HandleClick("订单123"))">确认订单</button>
对应方法:
private void HandleClick(string orderId) { /* 处理逻辑 */ }
Lambda 中的
e
是可选的,即使不使用也可以保留占位(如
@(e => ...)
),语法才合法

阻止默认行为:比如禁用表单提交或输入

有些场景下你希望点击后不触发浏览器默认动作(比如按钮在 form 里会提交),可以用

@on{EVENT}:preventDefault

全局禁止:
<button>保存</button>
条件性禁止(配合变量):
<input>

然后在方法里动态设置
shouldBlock = e.Key == "Enter";

基本上就这些。不需要手动调用刷新,Blazor 在事件处理完后会自动重新渲染组件。

相关推荐