Blazor 子组件如何更新父组件答案

【问题标题】：Blazor Child Component how to update parent componentBlazor 子组件如何更新父组件
【发布时间】：2021-07-04 04:16:46
【问题描述】：

我希望有人可以帮助我。我正在尝试学习 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 类 @typeparam 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();
    }
}

【问题讨论】：

欢迎...请务必阅读：stackoverflow.com/help/someone-answers

标签： blazor blazor-webassembly

【解决方案1】：

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

状态类处理来自 UI 的所有更改，并且不允许直接操作条目，因此它控制状态并可以通知任何消费者（例如 UI）有关更改。

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

见AppState.cs

这是 UI 类注入的简单状态容器。需要知道状态何时发生变化的组件可以处理此类使用的OnChange 事件。

【讨论】：

刚刚意识到我有一个特定的示例应用程序可以做到这一点（比较 Blazor、React 和 Angular，但没有完成）。 github.com/conficient/Blazor_Angular_React/blob/cart/src/Blazor/… 是购物车状态
感谢您的快速回复，我已按照您的模式进行了更改，但无法编译应用程序。并添加了一个新参数Parameter] public EventCallback OnUpdateShopping { get;放; } 。添加组件时，我引用了用于更新项目的新状态方法。有了这个，我得到一个无法从方法组转换为 EventCallback 错误

【解决方案2】：

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

在子组件中：

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

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

在父组件中：

<ChildComponent Onclick="GetChildComponent"></ChildComponent>

@code { 
 public void GetChildComponent(ChildComponent childComponent)
 {
  ...
 }
}

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

在子组件中：

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

因此，您可以根据需要访问子组件的属性。

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

编辑：我使用 T (typeparam) 来获取对象作为返回类型，如果你只是想获取字符串值，你可以用 string

【讨论】：