如何在Blazor中将数据从子组件发送到父组件(当单击列表时)

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); 
}
}

在父端，我将组件称为:

<Book @OnBookSelected="OnBuildSelectedHandler"></Book>
@code{
public void OnBuildSelectedHandler(MouseEventArgs e)
{
// assign to variable to display in html
}
} 

你可以一些，我使用EventCallback和InvokeAsync从我读做。如果我不提供argSelectBook，我在parent中得到事件参数，事件arge不包含图书id，只是一些窗口属性。

如何从孩子到父母获得单击的Book Id ?

感谢

Answer 1

这是@Enet回答的一个稍微修改的版本，演示了如何使用在开箱即用的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;
}