onSelect 函数

Question

我目前正在开发一个显示一些电影的应用程序。我有一个 API 可以成功检索电影，并且还可以选择按特定类型获取电影。为此，我创建了一个动态加载不同类型的 Select 元素。当单击其中一种类型时，我想通过使用 API 来更新电影，以仅获取所选类型的电影。

不幸的是，当我选择一个选项时没有任何反应。请注意，我已经确认 API 调用可以工作，因此它必须是此代码中的内容。 这是 HTML 元素：

<div class="content px-sm-3">
    <select>
        <option onselect="async () => await changeMoviesByGenre('None')" value="None">None</option>
        @foreach (var genre in genres)
        {
            <option value=@genre onselect="async () => await changeMoviesByGenre(genre)">@genre</option>
        }
    </select>
</div>

这是应该调用的函数：

private async Task changeMoviesByGenre(string genre) {
        if (genre == "None") {
            movies = await MovieClient.Movies.GetAll();
        }

        else {
            movies = await MovieClient.Movies.GetAllMoviesByGenre(genre);
        }
    }

Answer 1

OnSelect

不是你想象的那样。当您在

Input

元素中选择文本时会触发它。

更简单的方法（正如您在回答答案时所介绍的那样，我已将其作为完整的工作页面包含在答案中）是：

@page "/Test"

<div class="content px-sm-3 m-2">
    <select @onchange="OnChange">
        <option value="None">None</option>
        @foreach (var genre in genres)
        {
            <option value="@genre">@genre</option>
        }
    </select>
</div>
<div class="m-2">Selected: @SelectedGenre</div>

@code {

    private List<string> genres
        => new List<string>() { "Rock", "Folk", "Blues", "Pop" };

    private string SelectedGenre = string.Empty;

    private async Task OnChange(ChangeEventArgs e)
    {
        var selected = e.Value.ToString();
        SelectedGenre = "Getting it, just wait!!!";
        await Task.Delay(3000);
        if (selected.Equals("None", StringComparison.CurrentCultureIgnoreCase))
            this.SelectedGenre = "Give it another Go!";
        else
            this.SelectedGenre = selected;
    }
}

@Onxxxx（例如@OnChange和@OnClick）是UI事件。它们在组件上重新渲染之前由 UI 进程运行。任务事件处理程序由 UI 运行，并在更新 UI 之前等待

Task

。 void 事件处理程序由 UI 进程启动，并且如果/当它产生时更新 UI（更加复杂且不可预测）。您可以根据需要使用这些代码模式：

async void MyEventHander() {}` //for handlers that need to do async work and you don't need the UI process to wait on the completion of the handler.
async Task MyEventHander() {}` //for handlers that need to complete before re-rendering.
void MyEventHander() {}` //for handlers with no async work.

在我的示例中，我添加了

await Task.Delay(1000);

来模拟异步数据库调用，以便我可以将处理程序声明为

async

。

注：

1. e

   中的

   OnChange

   是一个对象，因此您可以将其转换为您期望的内容。
2. 初始化时尚未选择任何内容，因此如果您先选择它，则不会有

   OnChange

   ，因为什么都没有改变。

请参阅 Ms Docs - Blazor 事件处理。

Answer 2

我已经设法以某种方式解决了这个问题。 如果您遇到与我相同的问题，我可以使用此示例修复它，我不知道它为什么有效，但它确实有效。

我没有使用 foreach 中的值，而是使用 ChangedEventArgs 参数。我还将 onchange 设置为 Select 元素而不是 Options 元素。这就是我的代码现在的样子：

<div class="content px-sm-3">
    <select @onchange=@changeMovies>
        <option value="None"> None </option>
        @foreach (var genre in genres) {
            <option value=@genre> @genre </option>
        }
    </select>
</div>

这是被调用的新函数（请注意，这必须是一个任务，否则页面将不会更新）

 private async Task changeMovies(ChangeEventArgs e) {
        string selectedGenre = e.Value.ToString();
        if (selectedGenre == "None") {
            movies = await MovieClient.Movies.GetAll();
        }
        else {
            movies = await MovieClient.Movies.GetAllMoviesByGenre(selectedGenre);
        }
    }