Blazor：将类直接绑定到输入元素答案

【问题标题】：Blazor: binding a class to input elements directlyBlazor：将类直接绑定到输入元素
【发布时间】：2020-08-10 15:47:58
【问题描述】：

在一个杂货清单应用程序中，我有一个父组件循环遍历杂货项目，还有一个子组件使用输入元素（复选框和文本字段）显示每个杂货项目的详细信息。我已经设置了直接与 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; }
}

【问题讨论】：

Item.Name 不是只读字段吗？您不提供可以选择（选中）或不选择（默认，未选中）的项目的预定义列表
@enet 我很抱歉，但我不确定我是否理解您的评论。 Item.Name 不是只读的，它是数据模型对象 GroceryItem 的成员。我将它传递给子组件，以便组件可以显示它，并且如果用户决定这样做也更新它（用户可以选中该框或更改名称）。子组件在父组件中循环渲染。
您可能在父组件中使用@foreach 循环，如果是这样，解决此问题的一种方法是放弃子组件，只需编写您的
...

<li> <input type="text" @bind=Name /> </li> @code { [Parameter] public GroceryItem Item { get; set; } private string Name { get => this.Item.Name; set => this.Item.Name = value; } [Parameter] public EventCallback<GroceryItem> ItemChanged { get; set; } }