Blazor组件事件处理功能

2022-04-16 21:28:52

Blazor的组件当中, 提供了事件处理功能, 这点类似于使用客户端(Winform/Wpf)开发, 经常用到的一些类似: 按钮(Button), 输入框(TextBox) 用到的一些事件, 例如Click、DoubleClick、TextChanged 等等事件允许我们在后台代码当中进行处理相应的逻辑。

介绍事件

在Razor组件中, 同样提供了事件处理功能。对于具有委托类型值且名为 @on {EVENT}(例如 @onclick)的 HTML 元素特性,Razor 组件将该特性的值视为事件处理程序。

调用lamda表达式

下面的例子中:

Input输入框,添加了tArgs e) { //... }}

事件参数列表

Blazor组件事件处理功能

事件参数的方法(重载)

当同一个UI元素绑定了一个方法, 但是方法具备重载时, 需要我们在UI元素当中明确调用的方法, 否则编译器无法识别使用哪个方法。

<button @onclick="@(e=>Show(e))" />  //调用带事件参数的方法<button @onclick="@(()=>Show())" />  //调用不带事件参数的方法@code{    //不带事件参数的方法    public void Show()    {    }    //带事件参数的方法    public void Show(MouseEventArgs e)    {    }}

在默认的情况下, 我们如果只编写一个事件触发的方法, 并且明确它是否有参数, 在UI元素绑定方法上, 我们都无需传递参数。

    <button @onclick="@Show" />  @code{    public void Show(MouseEventArgs e)    {         //当button按钮被点击, 会自动将事件参数传递给e    }}

到此这篇关于Blazor组件事件处理功能的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。