时间戳

首页 > 解决方案 > Blazor：直接将类绑定到输入元素

blazor - Blazor：直接将类绑定到输入元素

问题描述

在一个杂货清单应用程序中，我有一个父组件循环杂货项目，一个子组件使用输入元素（复选框和文本字段）显示每个杂货项目的详细信息。我已经设置了直接与 GroceryItem 成员的双向绑定，并且在使用输入数据更新成员方面工作正常。

我有一个问题是通知父组件重新渲染自己。我知道当我检测到更改时我必须调用 EventCallBack，但我想避免将我的类成员复制为局部变量，只是为了能够使用 setter 来检测更改并调用 EventCallBack。我发现的另一个技巧是手动绑定数据，但这又会造成重复，因为我必须为每个输入元素设置一个事件处理程序。

有没有更好的办法？

我希望有一种机制可以向输入元素添加更多 onchange 事件处理程序，以便调用 EventCallBack ......但是因为 bind 占用了唯一可用的插槽，所以我不能。

// This is the child component

<li>
    <input type="checkbox" @bind=Item.Purchased />
    <input type="text" @bind=Item.Name />
</li>

@code
{
    [Parameter]
    public GroceryItem Item { get; set; }

    [Parameter]
    public EventCallback<GroceryItem> ItemChanged { get; set; }
}

标签： blazor

解决方案

如果要从子组件调用父组件方法，则需要使用 EventCallback。
但是，有很多方法可以从父组件调用子组件中的方法。
要了解更多信息，请参阅 Blazor LifeCycle 和 RenderTree。
父组件可以完全控制其子组件，但子组件只能通过回调调用父组件。

推荐阅读