Blazor University (6)组件 — 组件事件

原文链接:https://blazor-university.com/components/component-events/

组件事件

源代码[1]

EventCallback<T> 类是一个特殊的 Blazor 类,可以作为参数公开,以便组件可以在发生感兴趣的事情时轻松通知使用者。

一旦声明了 EventCallback<T> 类型的公共属性并使用 [Parameter] 属性进行了修饰,使用组件就可以在 Razor 标记中指定触发事件时要调用的方法。

向 Counter 组件添加事件

在新的 Blazor 应用中,编辑 /Pages/Counter.razor 文件并添加新的回调参数。

[Parameter]
public EventCallback<int> OnMultipleOfThree { get; set; }

这声明了一个名为 OnMultipleOfThree 的新 EventCallback,任何使用组件都可以注册它。<int> 指定事件回调发出的值将是 System.Int32

现在,如果我们编辑 IncrementCount 方法,我们可以在计数器增加到 3 的倍数时发出此事件。

private async Task IncrementCount()
{currentCount++;if (currentCount % 3 == 0)await OnMultipleOfThree.InvokeAsync(currentCount);
}

订阅 EventCallback

编辑 /Pages/Index.razor 页面,以便我们嵌入 Counter 组件并订阅其 OnMultipleOfThree 事件。将其标记更改为以下内容。

@page "/"Last multiple of three = @LastMultipleOfThree<Counter OnMultipleOfThree=@UpdateLastMultipleOfThreeValue/>@code
{int LastMultipleOfThree = 0;private void UpdateLastMultipleOfThreeValue(int value){LastMultipleOfThree = value;}
}
  • 第 9 行

    声明一个 int 类型的类成员,它存储 3 值的最后一个倍数。

  • 第 3 行

    显示 LastMultipleOfThree 的值

  • 第 5 行

    嵌入 Counter 组件并设置其 OnMultipleOfThree 事件以在发出事件时执行 UpdateLastMultipleOfThreeValue 方法。

  • 第 11 行

    从事件接收到的值用于更新 LastMultipleOfThree 的值。

EventCallback和 .NET 事件之间的区别

单播与多播

最显着的区别是 EventCallback<T> 是单播事件处理程序,而 .NET 事件是多播。Blazor EventCallback<T> 旨在分配单个值,并且只能回调单个方法。

// Setting a Blazor EventCallback
<MyComponent SomeEvent=@MyMethodToCall/>// Setting a .NET event
MyComponent.SomeEvent += MyMethodToCall;
// Unscrubscribing from the event
MyComponent.SomeEvent -= MyMethodToCall;

类与结构

.NET 事件(委托)是类,而 Blazor EventCallback<T> 是只读结构。与 .NET 委托不同,EventCallback<T> 不能为 null,因此在发出事件时无需进行任何 null 检查。

// Invoking a .NET event
MyNetEvent?.Invoke(this, someValue);// Invoking a CallbackEvent<T>
MyEventCallback.InvokeAsync(someValue);

等待回调

标准 .NET 事件是同步的,而 Blazor EventCallback<T> 是异步的。正如我们在前面的示例代码中看到的,EventCallback<T>.InvokeAsync 返回一个可以等待的 Task

Razor 标记兼容性

无法使用 [Parameter] 装饰标准 .NET 事件并通过 Razor 标记设置它,而使用 EventCallback<T> 可以。这使我们能够在视图标记本身中表达事件回调,这使得开发人员的意图更容易看到。

自动状态变化检测

每当从 EventCallback<T> 调用方法时,在方法执行后,Blazor 将在使用组件上执行 StateHasChanged(),以便在方法调用更改状态时重新渲染它。如果使用者的方法是通过标准 .NET 事件、Action或不是由 EventCallback<T> 发起的任何其他方法回调的,则不会发生这种情况。

例如,如果我们将一个新的 [Parameter] 添加到 Action<int> 类型的 Counter 组件中,并在当前计数是 2 的倍数时调用它,我们可以看到使用组件的渲染行为是如何受到影响的。

更改 Counter 组件以匹配以下代码:

@page "/counter"<h1>Counter</h1><p>Current count: @currentCount</p><button class="btn btn-primary" @onclick=IncrementCount>Click me</button>@code {private int currentCount = 0;[Parameter]public Action<int> OnMultipleOfTwoAction { get; set; }[Parameter]public EventCallback<int> OnMultipleOfThree { get; set; }private async Task IncrementCount(){currentCount++;if (currentCount % 2 == 0)OnMultipleOfTwoAction?.Invoke(currentCount);if (currentCount % 3 == 0)await OnMultipleOfThree.InvokeAsync(currentCount);}
}
  • 第 13 行

    添加了 Action<int> 类型的 [Parameter]

  • 第 21-22 行

    如果当前计数是 2 的倍数,则调用 OnMultipleOfTwoAction

现在更改 Index 组件,使其在值为 2 的倍数时设置回调方法,因此它也会存储并显示从 OnMultipleOfTwoAction 接收到的最后一个数字在使用的组件上。

@page "/"<ul><li>Last multiple of two = @LastMultipleOfTwo</li><li>Last multiple of three = @LastMultipleOfThree</li>
</ul><Counter OnMultipleOfThree=@UpdateLastMultipleOfThreeValue OnMultipleOfTwoAction=@UpdateLastMultipleOfTwoValue />@code
{int LastMultipleOfTwo = 0;int LastMultipleOfThree = 0;private Task UpdateLastMultipleOfThreeValue(int value){LastMultipleOfThree = value;return Task.CompletedTask;}private void UpdateLastMultipleOfTwoValue(int value){LastMultipleOfTwo = value;}
}
  • 第 13 行

    定义一个新成员来存储从使用组件传递的最新“二的倍数”值

  • 第 4 行

    在用户界面中显示 LastMultipleOfTwo 的值

  • 第 9 行

    在使用的组件上设置 OnMultipleOfTwo 以便在当前值是 2 的倍数时通知我们的组件

  • 第 24 行

    记录使用组件通知我们的最后 2 的倍数

当我们现在运行应用程序并多次单击按钮时,我们会看到当通过 Action<int> 回调 UpdateLastMultipleOfTwoValue 时,视图没有更新,但是当下一次单击通过 EventCallback<int> 回调 UpdateLastMultipleOfThreeValue 时,视图更新并显示两者的最新值。

f6ebba166e02608036957dedfeb38d3a.gif

事件顺序
点击计数回调执行使用者重新渲染
1N/A
2Action<int>No
3Action<int> EventCallback<int>Yes
4Action<int>No
5NoneN/A
6Action<int>  EventCallback<int>Yes

EventCallback<T> 通常回调带有签名 private Task SomeName(T value)的方法——其中方法的暴露级别并不重要。但是,Blazor 将允许我们设置一个 EventCallback<T> 来回调具有几个变体的方法。

如果我们的方法不执行任何异步操作,那么下面的实现可能会开始变得乏味:

public Task SomethingHappenedInChildComponent(string value)
{// Do something with valuereturn Task.CompletedTask;
}

因此,Blazor 将允许我们设置 EventCallback<T> 以回调具有 void 返回类型的方法。

public void SomethingHappenedInChildComponent(string value)
{// Do something with value
}

有时我们只想知道一个事件何时发生,而不是对它传递的值感兴趣。Blazor 还将回调一个排除 value 参数的方法。

// Either
public void SomethingHappenedInChildComponent()
{// Do something that doesn't need the value
}// Or
public Task SomethingHappenedInChildComponent()
{// Do some asynchronous work that doesn't need the valuereturn SomeTask;
}

浏览器 DOM 事件

呈现任何标记时,可以在呈现的 HTML 元素上分配标准 JavaScript 事件,以便执行我们自己的 Blazor C# 方法。例如,我们在其他地方的许多示例中使用了 @onclick 指令:

<button @onclick=ButtonClicked>Click me</button>

这些事件指令在 Visual Studio 编辑器中具有完整的 IntelliSense 支持,因此开始键入 @ 符号应该会为我们提供可用指令的完整列表,以及标识事件在我们的事件处理程序中传递给我们的参数类类型的描述。DOM 事件以 @on 开头。

f9ee7433182015c46442321018f7c4e8.png

将“@onabort”属性设置为提供的字符串或委托值。委托值应为“Microsoft.AspNetCore.Components.Web.ProgressEventArgs”类型

警告:在编写完全在服务器上运行的 Blazor 应用程序时,Blazor 将 hook 浏览器中的事件并将它们发送到服务器,以便可以调用我们的 C# 方法。这可能会导致频繁触发的事件(例如 onmousemove)明显变慢。

注意: 因为 C# 方法的 JavaScript 调用是异步的,这意味着在 C# 方法中我们不能像在 JavaScript 中那样取消事件。这是因为取消浏览器 DOM 事件是一个同步操作,当我们的 C# 被异步调用时,取消事件已经太迟了。

可用的 DOM 事件及其参数类型包括:

一般事件

DOM 事件参数类型
onactivateEventArgs
onbeforeactivateEventArgs
onbeforedeactivateEventArgs
ondeactivateEventArgs
onendedEventArgs
onfullscreenchangeEventArgs
onfullscreenerrorEventArgs
onloadeddataEventArgs
onloadedmetadataEventArgs
onpointerlockchangeEventArgs
onpointerlockerrorEventArgs
onreadystatechangeEventArgs
onscrollEventArgs

焦点事件

DOM 事件参数类型
onfocusFocusEventArgs
onblurFocusEventArgs
onfocusinFocusEventArgs
onfocusoutFocusEventArgs

鼠标事件

DOM 事件参数类型
onmouseoverMouseEventArgs
onmouseoutMouseEventArgs
onmousemoveMouseEventArgs
onmousedownMouseEventArgs
onmouseupMouseEventArgs
onclickMouseEventArgs
ondblclickMouseEventArgs
oncontextmenuMouseEventArgs
onwheelWheelEventArgs
onmousewheelWheelEventArgs

拖动事件

DOM 事件参数类型
ondragDragEventArgs
ondragendDragEventArgs
ondragenterDragEventArgs
ondragleaveDragEventArgs
ondragoverDragEventArgs
ondragstartDragEventArgs
ondropDragEventArgs

键盘事件

DOM 事件参数类型
onkeydownKeyboardEventArgs
onkeyupKeyboardEventArgs
onkeypressKeyboardEventArgs

输入事件

DOM 事件参数类型
onchangeChangeEventArgs
oninputChangeEventArgs
oninvalidEventArgs
onresetEventArgs
onselectEventArgs
onselectstartEventArgs
onselectionchangeEventArgs
onsubmitEventArgs

剪贴板事件

DOM 事件参数类型
onbeforecopyEventArgs
onbeforecutEventArgs
onbeforepasteEventArgs
oncopyClipboardEventArgs
oncutClipboardEventArgs
onpasteClipboardEventArgs

触摸事件

DOM 事件参数类型
ontouchcancelTouchEventArgs
ontouchendTouchEventArgs
ontouchmoveTouchEventArgs
ontouchstartTouchEventArgs
ontouchenterTouchEventArgs
ontouchleaveTouchEventArgs

指针事件

DOM 事件参数类型
ongotpointercapturePointerEventArgs
onlostpointercapturePointerEventArgs
onpointercancelPointerEventArgs
onpointerdownPointerEventArgs
onpointerenterPointerEventArgs
onpointerleavePointerEventArgs
onpointermovePointerEventArgs
onpointeroutPointerEventArgs
onpointeroverPointerEventArgs
onpointerupPointerEventArgs

多媒体事件

DOM 事件参数类型
oncanplayEventArgs
oncanplaythroughEventArgs
oncuechangeEventArgs
ondurationchangeEventArgs
onemptiedEventArgs
onpauseEventArgs
onplayEventArgs
onplayingEventArgs
onratechangeEventArgs
onseekedEventArgs
onseekingEventArgs
onstalledEventArgs
onstopEventArgs
onsuspendEventArgs
ontimeupdateEventArgs
onvolumechangeEventArgs
onwaitingEventArgs

进度事件

DOM 事件参数类型
onloadstartProgressEventArgs
ontimeoutProgressEventArgs
onabortProgressEventArgs
onloadProgressEventArgs
onloadendProgressEventArgs
onprogressProgressEventArgs
onerrorErrorEventArgs

参考资料

[1]

源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Components/EventCallbacks

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/289787.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript匿名函数以及在循环中的匿名函数

一 历史 JavaScript其实是一门奇异的语言&#xff0c;TA的一大特性是没有块级作用域 for(var i0;i<10;i){} console.log(i)大家猜测下值是多少&#xff1f;答案是 10&#xff0c; 虽然我们在一个块内申明了变量&#xff0c;但i却是在全范围内起作用的&#xff0c;所以就引入…

Linux内核笔记--内存管理之用户态进程内存分配

内核版本&#xff1a;linux-2.6.11 Linux在加载一个可执行程序的时候做了种种复杂的工作&#xff0c;内存分配是其中非常重要的一环&#xff0c;作为一个linux程序员必然会想要知道这个过程到底是怎么样的&#xff0c;内核源码会告诉你这一切。 线性区 一个可执行程序&#xff…

Android之javax.net.ssl.SSLPeerUnverifiedException: Hostname ip not verified:解决办法

1、问题 用HttpURLConnection去请求的时候抛了下面的异常 HttpRequest$HttpRequestException: javax.net.ssl.SSLPeerUnverifiedException: Hostname ip not verified: 2、分析和解决 从异常来看是因为SSL协议握手的过程中,这个服务度地址的证书没有被证实,被信任。 clien…

php 字符串进行计算_怎么在php中利用eval对字符串格式进行计算

怎么在php中利用eval对字符串格式进行计算发布时间&#xff1a;2020-12-16 16:42:57来源&#xff1a;亿速云阅读&#xff1a;101作者&#xff1a;Leah本篇文章给大家分享的是有关怎么在php中利用eval对字符串格式进行计算&#xff0c;小编觉得挺实用的&#xff0c;因此分享给大…

Xamarin效果第十四篇之玩耍GIS

最近再次拾起Xamarin然后也实现了祖传PLC控制和弹窗配置;这不又一次勾起来我想基于他玩玩原来一直玩耍的GIS,毕竟咱前面一直玩耍二维和三维的GIS相关的知识点;有兴趣的小伙伴可以翻翻我的历史文章;趁着激情满满;来看看最终咱实现的加载高德平面地图效果(有水印):再者就是满足群…

Android下载apk异常java.net.SocketTimeoutException: timeout解决办法

1、问题 实现下载apk的时候&#xff0c;抛出下面异常 java.net.SocketTimeoutException: timeout 2、分析 很明显是socket超时了&#xff0c;由于我的wifi网络比较慢&#xff0c;设置的超时时间可能短了。 在写入由 GetRequestStream 方法返回的流时&#xff0c;或在读取由…

SQL SERVER两种分页的存储过程介绍

由于现在很多的企业招聘的笔试都会让来招聘的写一个分页的存储过程,有的企业甚至要求应聘者用两种方式实现分页,如果没有在实际项目中使用过分页,那么很多的应聘者都会出现一定的问题,下面介绍两种分页的方法。 一、 以学生表为例,在数据库中有一个Student表,字段有 …

Java Socke 探究

Java中的Socket可以分为普通Socket和NioSocket两种。 普通Socket的用法 Java中的网络通信是通过Socket实现的&#xff0c;Socket分为ServerSocket和Socket两大类&#xff0c;ServerSocket用于服务端&#xff0c;可以通过accept方法监听请求&#xff0c;监听到请求后返回Socket&…

codeforces 600D Area of Two Circles' Intersection

分相离&#xff0c;内含&#xff0c;想交三种情况讨论一下。 主要是精度和数据范围的问题&#xff0c;首先数据用long double&#xff0c;能用整型判断就不要用浮点型。 题目中所给的坐标&#xff0c;半径是整型的&#xff0c;出现卡浮点判断的情况还是比较少的。 最后算三角型…

PHP进程退出信号_一文吃透 PHP 进程信号处理

背景前两周老大给安排了一个任务&#xff0c;写一个监听信号的包。因为我司的项目是运行在容器里边的&#xff0c;每次上线&#xff0c;需要重新打包镜像&#xff0c;然后启动。在重新打包之前&#xff0c;Dokcer会先给容器发送一个信号&#xff0c;然后等待一段超时时间(默认1…

GitHub Copilot 现已登陆 Visual Studio!

激动人心的好消息来了&#xff0c;GitHub 在3月29日发布博客&#xff0c;宣布 Github Copilot 现在可以在 Visual Studio 中使用。我们知道 Visual Studio 的 IntelliCode 本身已经很智能了, 现在又迎来了 Copilot, 编程体验将进入新的篇章。如何安装? 首先&#xff0c;您…

经典实用SQL语句大全汇总

目 录 1.随机取3条记录 2.随机选记录 3.删除重复记录 4.创建数据库 5.列出表里的所有的列名 6.选择从10到15的记录 7.压缩数据库

java之写接口回调编程经验改进

1、问题 在一个类里面数据的变化需要在另外一个类里面动态得到&#xff0c;比如在我的异步任务里面下载的数据&#xff0c;需要在UI界面的ProgressDialog里面动态显示&#xff0c;我们需要在异步任务里面写个接口&#xff0c;然后接口里面有一些函数&#xff0c;至于在Progres…

Mac Ubuntu ----端口被占用

Mac下使用lsof&#xff08;list open files&#xff09;来查看端口占用情况&#xff0c;lsof 是一个列出当前系统打开文件的工具。 使用 lsof 会列举所有占用的端口列表&#xff1a; 1$ lsof使用less可以用于分页展示&#xff0c;如&#xff1a; 1$ lsof | less也可以使用 -i 查…

iOS 9音频应用播放音频之音量设置与声道设置

iOS 9音频应用播放音频之音量设置与声道设置 iOS 9音频应用音量设置 音量又称响度、音强&#xff0c;是指人耳对所听到的声音大小强弱的主观感受&#xff0c;其客观评价尺度是声音的振幅大小。在iOS 9音频应用的应用中&#xff0c;经常会出现播放的音乐音量过大或者过小。此时i…

nginx配置文件中的location中文详解

location 语法:location [|~|~*|^~] /uri/ { … }默认:否 上下文:server 这个指令随URL不同而接受不同的结构。你可以配置使用常规字符串和正则表达式。如果使用正则表达式&#xff0c;你必须使用 ~* 前缀选择不区分大小写的匹配或者 ~ 选择区分大小写的匹配。 确定 哪个locati…

php fpm工作原理,什么是phpfpm的工作原理?

什么是phpfpm的工作原理&#xff1f;发布时间&#xff1a;2020-07-13 15:12:53来源&#xff1a;亿速云阅读&#xff1a;181作者&#xff1a;Leah什么是phpfpm的工作原理&#xff1f;针对这个问题&#xff0c;这篇文章详细介绍了相对应的分析和解答&#xff0c;希望可以帮助更多…

C#对象映射器之Mapster

简介Mapster是一个快&#xff0c;小巧&#xff0c;功能强大的对象映射.Net框架例子我有两个Model类且他们的属性一致&#xff0c;我们将 SourceObjectTest赋值给DestObjectTest该怎么做&#xff1f;SourceObjectTest sourceObject new SourceObjectTest(); sourceObject.Name …

如何关闭Struts2的webconsole.html

出于安全目的&#xff0c;在禁用了devMode之后&#xff0c;仍然不希望其他人员看到webconsole.html页面&#xff0c;则可以直接删除webconsole.html 的源文件&#xff0c; 它的位置存在于&#xff1a; 我们手工删除 struts2-core-*.jar\org\apache\struts2\interceptor\debuggi…

UIView 的基础

UIView•什么是控件&#xff1f;-屏幕上的所有UI元素都叫做控件&#xff0c;也有人叫做视图、组件-按钮&#xff08;UIButton&#xff09;、文本&#xff08;UILabel&#xff09;都是控件•控件的共同属性有哪些&#xff1f;-尺寸-位置-背景色-......-•苹果将控件的共同属性都…