[英]Blazor: The difference between builtin @on{EVENT} and custom EventCallback
Excuse me if this question seems silly;如果这个问题看起来很愚蠢,请原谅; but I have confusion over the usage of
@
prefix.但我对
@
前缀的使用感到困惑。
When hovering the mouse over builtin events such as onclick
the IntelliSense in Visual Studio shows that the type of event ( onclick
in this case) is Microsoft.AspNetCore.Components.EventCallback
and when implementing an EventCallback
in a component, the type obviously again is of Microsoft.AspNetCore.Components.EventCallback
;当将鼠标悬停在
onclick
等内置事件上时,Visual Studio 中的 IntelliSense 显示事件类型(在本例中为onclick
)是Microsoft.AspNetCore.Components.EventCallback
并且在组件中实现EventCallback
时,该类型显然又是Microsoft.AspNetCore.Components.EventCallback
;
But why builtin events such as onclick
should be prefixed with @
while EventCallback
(s) should be declared just like an attribute (without the @
as prefix)?但是为什么像
onclick
这样的内置事件应该以@
为前缀,而EventCallback
(s) 应该像属性一样声明(没有@
作为前缀)?
Excuse me if this question seems silly;
如果这个问题看起来很愚蠢,请原谅; but I have confusion over the usage of @ prefix.
但我对@前缀的使用感到困惑。
Not at all... This is a very important question that all developers in Blazor should be not only able to answer, but also able to act upon.一点也不……这是一个非常重要的问题,Blazor 的所有开发人员不仅应该能够回答,而且应该能够采取行动。
The attribute "@onclick" is a compiler directive instructing the compiler to create an EventCallback 'delegate'.属性“@onclick”是一个编译器指令,指示编译器创建一个 EventCallback 'delegate'。 EventCallback is a struct that stores a reference to a delegate;
EventCallback 是一个存储对委托的引用的结构; that is to a method, which is actually the value you assign to the attribute "@onclick", as for instance:
那是一个方法,它实际上是您分配给属性“@onclick”的值,例如:
<button type="button" @onclick="ClickMe">Click me</button>
@code
{
private void ClickMe()
{
Console.WriteLine("You clicked me...");
}
}
As you can see ClickMe
is a method that is invoked when you click on the button.如您所见,
ClickMe
是一种在您单击按钮时调用的方法。
You can also use the Html element attribute "onclick" without the @ sign.您还可以使用不带 @ 符号的 Html 元素属性“onclick”。 This is of course not a compiler directive butt rather Html element attribute, right?
这当然不是编译器指令,而是 Html 元素属性,对吧? And it's value can only be a JavaScript function, as for instance:
而且它的值只能是JavaScript function,例如:
<button type="button" onclick="window.ClickMe()">Click me</button>
Now when you click on the button, a JavaScript function, named ClickMe
, defined on the window object is called... Note the round parentheses. Now when you click on the button, a JavaScript function, named
ClickMe
, defined on the window object is called... Note the round parentheses.
Of course there are variety of ways to do the stuff above.当然,有多种方法可以完成上述工作。
In the photo you posted, the Modal component has a property named onOK
whose type is EventCallback
, and thus its value should be a suitable method, ModalOnOK
.在您发布的照片中,Modal 组件有一个名为
onOK
的属性,其类型为EventCallback
,因此它的值应该是一个合适的方法ModalOnOK
。 The following code snippet illustrate this:以下代码片段说明了这一点:
Modal.razor (definition of Modal) Modal.razor(Modal的定义)
@code{
[Parameter]
public EventCallBack onOK {get; set;}
}
As you can see onOK
is a parameter property whose type is EventCallBack
.如您所见,
onOK
是一个参数属性,其类型为EventCallBack
。 Thus in the parent component, where you use the Modal component, you should assign the property attribute with the value of a method that the EventCallBack
can encapsulate.因此,在使用 Modal 组件的父组件中,您应该为 property 属性分配
EventCallBack
可以封装的方法的值。
Sorry, there is lots and lots to say, this is only a fraction of the material.对不起,有很多很多要说的,这只是材料的一小部分。 But time to part.
但是是时候分开了。
Hope this helps...希望这可以帮助...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.