c# - Blazor 数据列表 onchange 事件未触发

Question

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

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

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

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

• 我试过the answer as suggested here但它不起作用。
• 此外，当我更改 @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
    }
}

基类可能是无关紧要的，但无论如何它在这里:

    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):@bind="eventType.Name"而不是更改事件。请注意，使用更改事件不会导致双向绑定(bind)...