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,一经查实,立即删除!

相关文章

Xamarin效果第十四篇之玩耍GIS

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

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;您…

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

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

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;-尺寸-位置-背景色-......-•苹果将控件的共同属性都…

JS

为什么80%的码农都做不了架构师&#xff1f;>>> function getQueryString(name) {var reg new RegExp("(^|&)" name "([^&]*)(&|$)"),r window.location.search.substr(1).match(reg);if(r ! null) {return unescape(r[2]); }r…

ssh公钥免密码登录

2019独角兽企业重金招聘Python工程师标准>>> ssh 无密码登录要使用公钥与私钥。linux下可以用用ssh-keygen生成公钥/私钥对&#xff0c;下面我以CentOS为例。 有机器A(192.168.1.155)&#xff0c;B(192.168.1.181)。现想A通过ssh免密码登录到B。 首先以root账户登陆…

Spring4Shell的漏洞原理分析

Spring框架最新的PoC这两天出来的一个RCE漏洞&#xff0c;但是有以下的条件限制才行&#xff1a;必须是jdk9及以上必须是部署在tomcat的应用是springmvc的或者webflux的应用具体的可以查看spring官方&#xff1a;https://spring.io/blog/2022/03/31/spring-framework-rce-early…

php 点对点,浅析点对点(End-to-End)的场景文字识别

一、背景随着智能手机的广泛普及和移动互联网的迅速发展&#xff0c;通过手机等移动终端的摄像头获取、检索和分享资讯已经逐步成为一种生活方式。基于摄像头的(Camera-based)的应用更加强调对拍摄场景的理解。通常&#xff0c;在文字和其他物体并存的场景&#xff0c;用户往往…

【ArcGIS遇上Python】Python实现Modis NDVI批量化月最大合成

「 刘一哥GIS」CSDN专业技术博文专栏目录索引https://geostorm.blog.csdn.net/article/details/113732454 最大合成法(MVC)可以在Envi中的Band Math中进行,式子是B1>B2,但是无法批量化;本文实现在ArcGIS中利用Python代码批量进行,如下: 用到的Modis NDVI数据是在MRT…

cad2016中选择全图字体怎么操作_打开CAD图纸字体丢失、重新选择怎么办?这样设置,一辈子用的到...

AutoCAD图纸本身就有着比较特殊的个性&#xff0c;难编辑难打开&#xff0c;时不时的还会来个乱码、字体缺失&#xff0c;甚至有的时候还提示我们进行字体的重新选择&#xff0c;应该怎么解决呢&#xff1f;虽然是个很经常遇见的问题&#xff0c;很多的小伙伴还是不知道如何解决…

MassTransit - .NET Core 的分布式应用程序框架

简介MassTransit 是一个免费的、开源的.NET 分布式应用程序框架。MassTransit 使创建应用程序和服务变得容易&#xff0c;这些应用程序和服务利用基于消息的松散耦合异步通信来实现更高的可用性、可靠性和可扩展性特点•易于使用和理解的 API&#xff0c;让您专注于解决业务问题…

mongo学习笔记(二):聚合,游标

一、聚合 <1> Count 1.db.person.count() 2.db.person.count({"age":20}) <2> Distinct db.person.distinct("age")//指定了谁&#xff0c;谁就不能重复 <3> Group key&#xff1a;这个就是分组的key&#xff0c;我们这里是对年龄分组。…

Java实验二猜数字游戏,JAVA-第2周实验-猜数字游戏

JAVA--第2周实验--猜数字游戏/* (程序头部注释开始)* 程序的版权和版本声明部分* Copyright (c) 2011, 烟台大学计算机学院学生* All rights reserved.* 文件名称&#xff1a;猜数字游戏* 作 者&#xff1a; 雷恒鑫* 完成日期&#xff1a; 2012 年 09 月 07 日* 版 本 号&#…

Xamarin效果第十五篇之自定义CheckBox

在上一篇中使用Xamarin玩耍了GIS加载高德和百度;这不这两天又抽空完善了一下;自定义了一下CheckBox;来看看最终效果:关于实现咱就是直接自定义ContentView:后台无非就是一堆的依赖属性(和WPF真像):后台定义的Command为了支持选中状态:‍再来看看具体使用:<CustomViews:Image…

java爬虫工具xpath提取,2020-07-16--爬虫数据提取--xpath

xpath全称 XML Path Language 是一门在XML文档中 查找信息的语言 最初是用来搜寻XML文档的 但是它同样适用于HTML文档的搜索XPath 的选择功能十分强大&#xff0c;它提供了非常简洁的路径选择表达式&#xff0c;另外还提供了超过100个内置函数&#xff0c;用于字符串&#xff0…

ant压缩在哪卸载_反病毒软件这么多,到底哪一款适合你

记得大学读书的时候,买了电脑,第一件事情就是卸载windows自带的杀毒软件,然后装上自己心仪的杀毒软件,可是市面上杀毒软件这么多,哪一款适合你呢?我找了市面上排名最靠前的三款杀毒软件,让我们看看他们孰胜孰劣,还是各有千秋.他们分别是腾讯的电脑管家,金山毒霸,360安全卫士.这…