如何对来自 Blazor webassembly 组件的 javascript CustomEvent 做出反应答案

【问题标题】：How to react to javascript CustomEvent from Blazor webassembly component如何对来自 Blazor webassembly 组件的 javascript CustomEvent 做出反应
【发布时间】：2020-11-25 22:48:50
【问题描述】：

我有一个 Canvas 元素，它有一些用 Javascript 编写的自定义功能。我正在尝试在 Blazor Webassembly 组件中为此功能创建一个包装器。

Javascript 代码使用dispatchEvent 方法生成自定义事件：

const event = new CustomEvent("uvrectadded", {
            bubbles: true,
            detail: { uvrect: uvr }
});
const result = this.canvas.dispatchEvent(event);

如何在 Blazor 服务器端组件中侦听此事件？我尝试了以下方法：

<canvas id="map-canvas" @uvrectadded="OnUVRectAdded"></canvas>

@code{
    private void OnUVRectAdded(EventArgs e)
    {
        Console.WriteLine("Blazor: ONUVRectAdded");
    }
}

在上面的代码中，指令没有编译，但我不知道如何注册事件指令。

除此之外：我还尝试从 Javascript 组件中引发 change 事件，这确实由 Blazor 代码使用 @onchange 指令注册，但是，抛出异常说系统无法反序列化事件。

【问题讨论】：

你有没有设法找到这个问题的答案？我正在寻找同样的东西。 EventHandler 属性也没有帮助，因为我不知道我应该用它做什么。

标签： blazor-webassembly

【解决方案1】：

在 Blazor 中，您可以像这样使用 EventHandlerAttribute 注册指令：

[EventHandler("onuvrectadded", typeof(EventArgs))]
public static class EventHandlers
{
}

但是，我在反序列化 CustomEvent 的 detail 属性时遇到了一些问题。

【讨论】：

到目前为止，我发现从事件中将自定义数据导入 Blazor 的唯一方法是在 Web 组件上使用 onchange + value 属性。因此，您可以将画布包装在 Web 组件中并公开更改事件和值属性。
相关 Blazor 源代码：github.com/dotnet/aspnetcore/blob/… 和 github.com/dotnet/aspnetcore/blob/…
你可以注册，但是和我的例子一样，它不起作用。

【解决方案2】：

我也在挣扎。我可以看到 JS 事件正在引发（添加了一个 JS 侦听器来检查是否真的引发了）。

我已经注册了该事件，并定义了它的 C# 部分。

  [EventHandler("oncustomjsevent", typeof(CustomJSEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
    public static class EventHandlers
    {
        // This static class doesn't need to contain any members. It's just a place where we can put
        // [EventHandler] attributes to configure event types on the Razor compiler. This affects the
        // compiler output as well as code completions in the editor.
    }

    public class CustomJSEventArgs : System.EventArgs
    {
        // Data for these properties will be supplied by custom JavaScript logic
        public string EventData { get; set; }
    }

但无法让 Blazor 在任何地方看到该活动。尝试添加到 div、按钮、标签等仍然不起作用。例如。

   <Button @oncustomjsevent="OnLinkClick" />

 private void OnLinkClick(CustomJSEventArgs eventArgs)
    {
        throw new InvalidCastException(eventArgs.EventData);
        var x = 1; 
    }

【讨论】：