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 在事件处理完后会自动重新渲染组件。
