如何将数据从 Child 发送到 Blazor 中的 Parent 组件（单击列表时）

Question

我有一个像这样的简单组件：

@foreach(book in store) {
    <li @click="@SelectBook(@book.id)"> @book.title <li> <!-- book.id throws error -->
}

@code{
    [Parameter]
    public EventCallback<MouseEventArgs> OnBookSelected { get; set; }
   

   public async Task SelectBuild(MouseEventArgs e)
    {
        await OnBuildSelected.InvokeAsync(e); 
    }
}

在 parent 方面，我将组件称为：

<Book @OnBookSelected="OnBuildSelectedHandler"></Book>

@code{
    public void OnBuildSelectedHandler(MouseEventArgs e)
    {
       // assign to variable to display in html
    }
}

如你所见，我正在使用我阅读的 EventCallback 和 InvokeAsync 来做。如果我不提供 arg SelectBook，我会在 parent 中获取事件 arg，事件 arg e 不包含图书 ID，仅包含一些 windows 属性。

如何获取点击的图书 ID 从 child 到 parent？

谢谢

Answer 1

这是@Enet 答案的稍微修改版本，演示了如何使用 out-of-the-box Blazor 输入控件中使用的内置 razor 绑定框架。

修改后的 BookComponent：

<ul>
    @foreach (var book in Books)
    {
        <li class="@this.Selected(book)" @key="book" @onclick="@(() => this.SelectBook(book))"> @book.Title</li>
    }
</ul>
@code
{
    [Parameter] public Book Value { get; set; }
    [Parameter] public EventCallback<Book> ValueChanged { get; set; }
    [Parameter, EditorRequired] public List<Book> Books { get; set; }

    public async Task SelectBook(Book book)
        => await ValueChanged.InvokeAsync(book);

    // If you want to highlight the selected book
    private string Selected(Book item)
        => item.ID == this.Value.ID
        ? "selected"
        : string.Empty;
}

并像这样使用：

@page "/"

<PageTitle>Index</PageTitle>

@if (_selectedBook != null)
{
    <div>@_selectedBook.Title </div>
}

<BookComponent Books="books" @bind-Value=this._selectedBook />

@code
{
    private List<Book> books = Enumerable.Range(1, 10)
        .Select(i => new Book {ID = i, Title = $"Title{i}"}).ToList();

    private Book? _selectedBook;
}

如何将数据从 Child 发送到 Blazor 中的 Parent 组件（单击列表时）

How to send data from Child to Parent component in Blazor (when a list is clicked)

c#

blazor

blazor-server-side