Blazor 数据列表 onchange 事件未触发

Question

我在 Blazor Server / .NET Core 3.1 的 .razor 组件的数据列表中实现了 onchange。申请。

在浏览器中，当我 select 数据列表中的一个选项时，OnChanged 方法不会触发。我在 OnChanged 中的断点是未命中。

我想让它启动，然后使用 OnChanged 填充 <select name="EventsInType">

我在页面中添加了一个 <button 元素 @onclick="OnClicked" 作为一个有效的例子 - 这确实触发了我在 OnClicked 中的断点。

我已经试过了但是还是不行。
此外，当我将语法从 @onchange="OnChanged" 更改为 onchange="@OnChanged" 时，我得到以下信息：

Cannot convert method group 'OnChanged' to non-delegate type 'object'. Did you intend to invoke the method?

我原以为使用 Blazor 应该很简单，这里有什么我不明白的地方吗？

代码如下：

@page "/"
@inherits EventDetailsBase
Event Type
<input autoComplete="on" list="EventTypes" placeholder="Search event types..." />
<datalist @onchange="OnChanged" id="EventTypes">
    @foreach (var eventType in EventTypes)
    {
        <option value="@eventType.Name">@eventType.Name</option>
    }
</datalist>

<select name="EventsInType">

</select>

<button class="btn btn-primary" @onclick="OnClicked">
    Click Me
</button>

@code {
    private void OnClicked(MouseEventArgs e)
    {
        var test = "";
    }

    private void OnChanged(ChangeEventArgs args)
    {
        //POPULATE HTML SELECT "EventsInType" HERE
    }
}

基数 class 可能无关紧要，但无论如何：

    public class EventDetailsBase : ComponentBase
    {
        [Inject]
        public IMyService MyService { get; set; }
        public List<EventType> EventTypes { get; set; } = new List<EventType>();

        protected override async Task OnInitializedAsync()
        {
            EventTypes = await MyService.GetEventTypes();

        }

        public void GetEventsByType(ChangeEventArgs changeEventArgs)
        {
            var test = changeEventArgs;
        }
    }

** 请注意，为了简单起见，我将 OnClicked 和 OnChanged 放在 .razor 组件 @code 中，最终我将移动到基础 class.

Answer 1

我觉得应该是这样的：

<input @onchange="OnChanged" autoComplete="on" list="EventTypes" placeholder="Search event types..." />
<datalist id="EventTypes">
    @foreach (var eventType in EventTypes)
    {
        <option value="@eventType.Name">@eventType.Name</option>
    }
</datalist>

您也可以在输入元素上使用这种形式的绑定： @bind="eventType.Name" 而不是 change 事件。请注意，使用更改事件不会导致双向绑定...

Blazor 数据列表 onchange 事件未触发

Blazor datalist onchange event not firing

c#

razor

.net-core

blazor

blazor-server-side