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”转换为非委托类型“ object”。您是否打算调用该方法？

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

Blazor数据列表onchange事件未触发

1 个答案: