Question

我现在在Blazor上进行了一段时间的实验，我试图找到关于两者之间区别的解释

<input type="button" onclick="@methodCall()">Something</button>

和

<input type="button" @onclick="() => methodCall()">Something</button>

为什么@click会比@成为价值的一部分？

Answer 1

如果您在on{event} html元素前面加上@，Blazor会将属性值视为c＃事件处理程序。

如果您省略@符号，则该属性将被视为常规的html偶数处理程序，即它会调用javascript方法。

如果您阅读较早的帖子或博客，请注意，因为在Blazor的早期版本中，撰写以下内容有效：

<button onclick="@OnClick">

这令人困惑，并且在3.0 Preview 6之后，所有指令都遵循相同的模式。

@directive(-suffix(:name))(="value")

Blazor团队提出更改的原因：

这使C＃事件处理程序不同于JS事件处理程序，因为所有C＃事件处理程序均以@开头的属性表示符号。

Answer 2

将“ @”放在“ onclick”之前时，将创建一个编译器指令。如果尚未强制执行，则将在将来强制执行此构造。它指示编译器创建一个EventCallback对象，该对象为处理您分配为@onclick指令值的代码提供必要的适当委托。此设置：@onclick="() => methodCall()"告诉编译器生成一个EventCallback对象，该对象提供适当的委托来执行lambada表达式。请注意，当您要将值传递给由lambada表达式封装的方法时，可以使用此构造，例如：

@onclick="() => methodCall('Hello world')"

void methodCall（字符串str） { }

如果不必将值传递给被调用的方法，则应这样构造@onclick指令：@onclick="methodCall"或@onclick="@methodCall" “ @”符号告诉编译器@onclick指令的值是可执行代码，而不仅仅是字符串，在这种情况下将触发错误。但是正如您所看到的，可以省略“ @”符号，并且不会引发任何错误，因为编译器知道它是使用适当的委托创建EventCallback结构对象的方法名称。

此onclick="@methodCall()"是错误的。它告诉Blazor创建一个输入Html元素，其值应为名为“ methodCall”的JavaScript方法，并应在Blazor（C＃）中定义和执行。没有这样的动物。

您可以使用类似以下的结构：`onclick =“ methodCall（）”，在这种情况下，您将需要一个名为methodCall的JavaSript方法。

您也可以执行以下操作：onclick="alert('I'm a JavaScript method')"

最重要的是要记住，当您使用Html元素属性onclick时，其值应为JavaScript方法。这与@onclick编译器指令完全不同...

希望这对您有帮助...

Blazor中的不同方法调用

2 个答案: