Blazor 中的不同方法调用答案

【问题标题】：Different method calls in BlazorBlazor 中的不同方法调用
【发布时间】：2020-03-05 17:54:42
【问题描述】：

我现在正在尝试使用 Blazor 一段时间，并试图找到关于两者区别的解释

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

和

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

为什么在 onclick 和 @ 成为价值的一部分之前需要 @？

【问题讨论】：

onclick="@methodCall()" 仅在 methodCall 返回 JavaScript 代码时有效。并且 methodCall() 将在每次状态更改时运行，而不是在您单击 Btn 时运行。
您的意思可能是@onclick="methodCall"。在发布之前检查您的代码。
Henk Holterman, onclick="@methodCall()" 会导致错误。它根本不会运行。请阅读我的答案以了解其机制。
Henk Holterman，请解释一下您所说的“并且 methodCall() 将在每次状态更改时运行，而不是在您单击 Btn 时运行。”
让methodCall()返回"alert()"，就会出现。

标签： blazor

【解决方案1】：

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

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

void methodCall(string 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 编译器指令完全不同...

希望对你有帮助……

【讨论】：

【解决方案2】：

如果您为 on{event} html 元素添加前缀 @，则 Blazor 会将属性的值视为 c# 事件处理程序。

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

如果您阅读较旧的帖子或博客，请注意，因为在以前版本的 Blazor 中，写入是有效的：

<button onclick="@OnClick">

这很令人困惑，在 3.0 Preview 6 之后，所有指令都遵循一个通用模式。

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

Blazor 团队给出的改动原因：

这使得 C# 事件处理程序不同于 JS 事件处理程序，因为所有 C# 事件处理程序都由带有 @ 前缀的属性指示符号。

【讨论】：