Blazor子组件如何更新父组件

Question

我希望有人能帮助我。我正在努力学习Blazor，我正在创建一个创建购物清单的示例网站。我在更新列表项时遇到问题，因为我无法将项从子组件传递回父组件，然后传递给API调用。通过更新按钮，我可以点击UpdateItem方法，但我不确定如何传递来自三个输入的绑定项。

<ListTemplate Loader="@GetShopping" ListGroupClass="orders-list">
<Loading>Loading...</Loading>
<Empty>Empty.......</Empty>
<Item Context="item">
<input @bind="item.Id" />
<input type="checkbox" @bind="item.IsDone" />
<input @bind="item.Item" />
<button @onclick="UpdateItem">Update</button>
</Item>
<AddNew>
<input placeholder="Something todo" @bind="newToDo" />
<button @onclick="AddTodo">Add Todo</button>
</AddNew>
</ListTemplate>

ListTemplate类@类型参数TItem

@if (items == null)
{
@Loading 
}
else if (!items.Any())
{
@Empty 
}
else
{
<div class="list-group @ListGroupClass">
@foreach (var item in items)
{
<div class="list-group-item">
@Item(item) 
</div>
}
@AddNew
</div>}
@code 
{ 
IEnumerable<TItem> items;
[Parameter] public Func<Task<IEnumerable<TItem>>> Loader { get; set; }
[Parameter] public RenderFragment Loading { get; set; }
[Parameter] public RenderFragment Empty { get; set; }
[Parameter] public RenderFragment AddNew { get; set; }
[Parameter] public RenderFragment<TItem> Item { get; set; }
[Parameter] public string ListGroupClass { get; set; }
protected override async Task OnParametersSetAsync()
{
items = await Loader();
}
}

Answer 1

步骤1您应该在子组件中准备一个eventcallback属性。

在ChildComponent中：

[Parameter]
public EventCallback<T> OnClick { get; set; }

步骤2您应该创建一个方法，您可以触发该方法来绑定ChildComponent的OnClick属性

在ParentComponent中：

<ChildComponent Onclick="GetChildComponent"></ChildComponent>
@code { 
public void GetChildComponent(ChildComponent childComponent)
{
...
}
}

步骤3现在，您只需要调用ChildComponent 中的绑定方法

在ChildComponent中：

<ChildComponent @onclick="(()=>OnClick.InvokeAsync(this))></ChildComponent>

这样，您就可以随心所欲地访问子组件的属性。

通过这种方式，您可以触发属于父级的任何方法。如果您想刷新父级，可以创建一个包含StateHasChanged((的方法，然后绑定。

编辑：我使用T(typeparam(获取对象作为返回类型，如果你只想获取字符串值，你可以使用字符串进行更改

Answer 2

我建议使用状态类来处理数据和事件，并使其负责与API和UI的交互。

state类处理从UI进行的所有更改，不允许直接操作条目，因此它控制状态，并可以将更改通知任何使用者(例如UI(。

这种方法的一个很好的例子是Blazor FlightFinder示例应用程序：

请参阅AppState.cs

这是UI类注入的一个简单状态容器。需要知道状态何时更改的组件可以处理此类使用的OnChange事件。