将一个组件中的 API POST 请求的结果发送到另一个组件以供使用？

Question

我已按照教程 HERE 向 API 发出 POST 请求，并且效果很好；我已成功请求 -> 收到 -> 并处理了数据。

我现在正在尝试扩展我学到的知识并将其用于我更大的应用程序中，但我不知道该怎么做。

我使用Index.razor 页面作为我的“根”页面。在这个根页面中，我有一些逻辑来决定在页面上显示什么。如果没有要处理的结果，我会显示搜索输入表单 (DefaultSearch.razor)。如果有要处理的结果，我会显示这些结果 (SearchResultsPage.razor)。

我的问题是我不知道如何(1)将输入的查询字符串从DefaultSearch.razor组件发送回根页面进行处理，(2) strong> 如何将返回的处理结果发送到SearchResultsPage.razor 组件进行显示。

Index.razor：

@page "/"
<div class="text-center">
    <HeaderLarge />
        @if (fetchedResults == null)
        {
            <DefaultSearch />
        } else {
            <SearchResultsPage />
        }
</div>

@code {
    try
    {
        HttpClient client = new HttpClient();
        client.BaseAddress = new Uri(@"http://192.168.1.234:8080");
        Search search = new Search(queryString);
        string searchstr = JsonConvert.SerializeObject(search);
        StringContent content = new StringContent(searchstr, Encoding.UTF8, "application/json");
        using HttpResponseMessage httpResponse = await client.PostAsync(("/api/...", content);
        httpResponse.EnsureSuccessStatusCode();
        if (httpResponse.StatusCode == System.Net.HttpStatusCode.OK)
        {
            string response = await httpResponse.Content.ReadAsStringAsync();
            fetchedResults = JsonConvert.DeserializeObject<SearchResultSet>(response);
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

DefaultSearch.razor：

<div id="SearchContainer">
    <div id="SearchFormContainer">
        <input id="mainSearchInputField" name="queryString" type="text" /><button @onclick()>Search</button>
    </div>
</div>

@code {

}

SearchResultsPage.razor：

@page "/search"
<h3>SearchResultsPage</h3>
<div>
    @if (fetchedResults != null)
    {
        @foreach (var result in fetchedResults.documents)
        {
            <div>
                <table class="message">
                    <tr>
                        <td>Subject</td>
                        <td>@(result.subject)</td>
                    </tr>
                    <tr>
                        <td>ID</td>
                        <td>@result.docId</td>
                    </tr>
                    <tr>
                        <td class="message_body" colspan="2">
                            <span>@(result.messageBody)</span>
                        </td>
                    </tr>
                </table>
            </div>
        }
    }
</div>

@code {
    [Parameter]
    public SearchResultSet fetchedResults { get; set; }
}

Answer 1

您可以使用EventCallbacks 将值向上传递给父组件，并使用[Parameter]s 向下传递给子组件。这是您的组件名称的通用解决方案：

DefaultSearch.razor（子 A）

<input @bind-value="SearchValue" />
<button @onclick="Handle">Search</button>

@code{
    string SearchValue { get; set; }

    // Allows parent to listen for the 'click' event on the search button
    [Parameter]
    public EventCallback<string> OnClick { get; set; }

    async Task Handle()
    {
        if(OnClick.HasDelegate)
        {
            // Calls the EventCallback, passing the search term
            await OnClick.InvokeAsync(SearchValue);
        }
    }
}

Index.razor（父级）：

<DefaultSearch OnClick="HandleSearch" />
<SearchResultsPage FetchedResults="Results" />

@code {
    SearchResultSet Results { get; set; }

    async Task HandleSearch(string searchTerm) {
        // However you need to get your results here:
        Results = await GetResultsForSearchTerm(searchTerm);

        // Signal a re-render from an async opperation.
        StateHasChanged();
    }
}

SearchResultsPage.cs（子 B）：

<!-- markup here -->

@code {
    // Receive the result set here:
    [Parameter]
    public SearchResultSet FetchedResults { get; set; }
}