Blazor-事件参数

内置事件参数

在Blazor 项目中,微软对事件的事件参数进行了封装,所有的事件参数类都必须继承 EventArgs 基类。
如我们不清楚当前的方法封装的事件到底是什么类型的?我们可以使用EventArgs来接收参数,之后断点查看下EventArgs的子类类型,这样就可以判断出来事件的类型。
在这里插入图片描述

我们这里使用的是@onclick可以看到封装的类型为MouseEventArgs
在这里插入图片描述

在 Razor 组件中,事件参数只需要在事件处理程序上定义,在调用时无需要传入任何值

示例

根据上述的测试我们已经知道了事件的具体类型,我们用具体的参数类型来接收,并获取Event中的值

@page "/demoPage"

<h3>DemoPage</h3>
<button @onclick="SetInfo">Update Info</button>
<p>@info</p>
@code {
    private string? info;
    private void SetInfo(MouseEventArgs eventArgs)
    {
        info = $"{eventArgs.ScreenX}-{eventArgs.ScreenY}";
    }
}

点击前:

在这里插入图片描述
点击后:
在这里插入图片描述

我们可以通过Event拿到传递的值

内置事件参数类型

  1. ClipboardEventArgs:用于处理剪贴板事件(如 @oncopy、@oncut、@onpaste)。
  2. ProgressEventArgs:用于处理文件上传的进度事件(如 @onprogress)
  3. TouchEventArgs:用于处理触摸事件(如 @ontouchstart、@ontouchend)。
  4. MouseEventArgs:用于处理鼠标事件(如 @onclick、@onmouseover、@onmousemove 等)。
  5. PointerEventArgs:指针事件(如鼠标、触摸屏、触控笔等输入设备的交互事件)(如:@onpointerdown)
  6. DragEventArgs:用于处理拖放事件(如 @ondrag、@ondrop)。
  7. ErrorEventArgs :处理 错误事件,通常与 组件结合使用,用于捕获组件渲染过程中未处理的异常。
  8. FocusEventArgs:用于处理焦点事件(如 @onfocus、@onblur)。
  9. ChangeEventArgs:用于处理输入框内容变化的事件(如 、 等)。
  10. KeyboardEventArgs:用于处理键盘事件(如 @onkeydown、@onkeyup)。
  11. WheelEventArgs:用于处理鼠标滚轮事件(如 @onwheel)。

匿名方法多参数传递

如果我们想在传递参数时,不止传递事件参数或者不传递事件参数而传递我们自定义参数时,应该怎么操作?我们可以在 Lambda 表达式中调用任意参数的方法。
@()中显式使用 Lambda 表达式调用
我们用一个示例的场景来看看用法,我们有两个按钮,不同的按钮传递不同内容的多参数

@page "/demoPage"

<h3>DemoPage</h3>
<button @onclick="@((arg)=>SetInfo(arg,"A","AAAAA"))">UpdateA</button>
<button @onclick="@((arg)=>SetInfo(arg,"B","BBBB"))">UpdateB</button>
<p>@info</p>
@code {
    private string? info;
    private void SetInfo(MouseEventArgs eventArgs, string buttonName, string buttonInfo)
    {
        info = $"X:{eventArgs.ScreenX}-Y:{eventArgs.ScreenY}-NAME:{buttonName}-Info{buttonInfo}";
    }
}

初始化:
在这里插入图片描述

点击A:
在这里插入图片描述

点击B:
在这里插入图片描述

当然我们也可以不传递Event参数,修改如下:

@page "/demoPage"

<h3>DemoPage</h3>
<button @onclick="@(()=>SetInfo(arg,"A","AAAAA"))">UpdateA</button>
<button @onclick="@(()=>SetInfo(arg,"B","BBBB"))">UpdateB</button>
<p>@info</p>
@code {
    private string? info;
    private void SetInfo(string buttonName, string buttonInfo)
    {
        info = $"NAME:{buttonName}-Info{buttonInfo}";
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

code-Study

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值