本机 JS Web 组件的 Blazor 包装器中 CustomEvent 的 null 值

Question

我们正在尝试为我们的本机 Javascript Web 组件库构建 Blazor 包装器。

每当用户更改文本字段的值（即：键入/删除其中的内容）时，我们的输入都会发出自定义事件

valueChange

。我们想要捕获此事件并检索

detail

中的

CustomEvent

属性，其中包含当前文本框的文本：

library-input.js

：

#updateValue(value) {
    // ... updating the native `value` attribute

    const valueEvent = new CustomEvent("valueChange", {
        detail: this.#value,
        bubbles: true,
    });

    this.dispatchEvent(valueEvent);
}

libraryInput.razor

：

@inject IJSRuntime JSRuntime
@namespace BlazorWrapperForLibrary
@using System.Text.Json

<lib-input @ref="libInput" @onvalueChange="ValueChanged">
</lib-input>

@code {
    private ElementReference libInput;
    private const string JAVASCRIPT_FILE = "/js/library-components.js";
    private const string INTEROP_FILE = "/js/lib-input.interop.js";

    private IJSObjectReference? Module { get; set; }
    private IJSObjectReference? Interop { get; set; }
    
    [Parameter]
    public string? Value { get; set; }

    [Parameter]
    public EventCallback<InputValueChangeEventArgs> ValueChanged {get; set;}

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            Module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
            Interop = await JSRuntime.InvokeAsync<IJSObjectReference>("import", INTEROP_FILE);
        }
    }
}

CustomEvents.cs

：

public class InputValueChangeEventArgs : EventArgs
{
    public string? detail { get; set; }
}

[EventHandler("onvalueChange", typeof(InputValueChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

Counter.razor

：

@page "/counter"
    <LibInput Value="newValue" ValueChanged="@((InputValueChangeEventArgs value) => InputChanged(value))">
    </LibInput>
@code {
    private string newValue = "undefined";

    private void InputChanged(InputValueChangeEventArgs value)
    {
        Console.WriteLine(value.detail);
    }
}

• 当我在

  valueChange

  上为

  document

  添加事件侦听器时，我可以看到

  detail

  属性已成功填充。
• 当我在开发工具中的 Blazor JS 中放置断点时（

  onGlobalEvent(e)

  中的

  blazor.server.js

  ），我还可以看到

  detail

  属性已填充。
• 当我检查 Web Socket 消息时，我看到

  ......BeginInvokeDotNetFromJS..1..DispatchEventAsync..I[{"eventHandlerId":7,"eventName":"valueChange","eventFieldInfo":null},{}]

  。我不确定

  eventFieldInfo: null

  是否与此有关。
• 当我在

  InputChanged()

  文件中的

  Counter.razor

  方法中放置断点时，

  detail

  属性为

  null

  。

Answer 1

这可能与您的“InputValueChangeEventArgs”的“详细信息”为小写有关，而 Blazor 在序列化为 JSON 时期望为大写