Blazor datalist onchange 事件未触发

Question

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

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

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

我在页面中添加了一个<button 元素，其中@onclick="OnClicked" 是一个可行的示例 - 这确实会触发并且我在OnClicked 中的断点被命中。

• 我尝试了the answer as suggested here，但它不起作用。
• 此外，当我将语法从 @onchange="OnChanged" 更改为 onchange="@OnChanged" 时，我得到以下信息：

无法将方法组“OnChanged”转换为非委托类型“对象”。您是否打算调用该方法？

我认为 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
    }
}

基类可能无关紧要，但无论如何都在这里：

    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 中，最终我将移至基类。

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" 而不是更改事件。请注意，使用更改事件不会导致双向绑定...