如何使用onClick事件发出一个事件

Question

我有2个页面，有以下内容，两个页面后面的代码都有自己的搜索方法

<button class="btn input-search-btn no-outline" @onclick="@(async () => await Search())">

所以我想做的是把它放在它自己的组件中，当用户单击该组件引发'search'事件的按钮时，然后每个页面使用该组件来实现它自己的搜索。(还有更多的组件，但这是我的基本问题)

Answer 1

像这样:

SearchComponent.razor

<button class="btn input-search-btn no-outline" @onclick="@RequestSearch">
@code
{
[Parameter]
public EventCallback OnSearchRequested {get;set;}
async Task RequestSearch()
{
await OnSearchRequested.InvokeAsync();
}
}

PageA.razor

<SearchComponent @OnSearchRequested="SearchA" />
@code
{
async Task SearchA()
{
// Page A search logic
}
}

PageB.razor

<SearchComponent @OnSearchRequested="SearchB" />
@code
{
async Task SearchB()
{
// Page B search logic
}
}

请注意，您可以在SearchComponent中绑定搜索参数(字符串，选项等，例如SearchParams)并引发EventCallback<SearchParams>。