更改Blazor中绑定到阵列的子组件的事件处理

我有一个绑定到表单控件的模型，它可以很好地执行它所说的（这是一个很好的开始）

数据模型非常普通：

public class Enrolment
{
    public string Id { get; set; }
    public Parent[] Parents { get; set; }
    public Child[] Children { get; set; }
    ...
}

public class Parent
{
    public string FamilyName { get; set; }
    public string FirstName { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
}

当我单击“registration.razor”顶级表单（即“家长”表单）上的按钮时，如果我开始过多地谈论家长和孩子，这可能会让人困惑），我会在parents[]数组中再添加一位家长。考虑到我可能需要添加1到4个家长，我想我应该使用一个组件来处理表单的这一部分：

    @foreach(Parent parent in newEnrolment.Parents){
        <Caregiver RegisteredParent=parent OnEdit=CaregiverEdit />
    }

@foreach（newregistration.Parents中的父/母）{
}

医务人员组件如下所示：

<div className="row">
    <div className="column">
        <label htmlFor="lastName">Last name</label>
        <input type="text" placeholder="Last name" id="lastName" @bind=RegisteredParent.FamilyName />
    </div>
    <div className="column">
        <label htmlFor="firstName">Name</label>
        <input type="text" placeholder="First name" @bind=RegisteredParent.FirstName id="firstName" />
    </div>
    <div className="column">
        <label htmlFor="email">Email</label>
        <input type="text" placeholder="Email" id="email" @bind=RegisteredParent.Email />
    </div>
</div>
<button type="button" @onclick="OnSaveClick">Save</button>

@code {
    [Parameter]
    public Parent RegisteredParent { get; set; }

    [Parameter]
    public EventCallback<Parent> OnEdit { get; set; }


    private async Task OnSaveClick(MouseEventArgs e)
    {
        Console.WriteLine($"Saved {RegisteredParent.FirstName} {RegisteredParent.FamilyName}.");
        await OnEdit.InvokeAsync(RegisteredParent);
    }

}

姓
名称
电子邮件
拯救
@代码{
[参数]
公共父RegisteredParent{get；set；}
[参数]
public EventCallback OnEdit{get；set；}
SaveClick上的专用异步任务（MouseEventArgs e）
{
Console.WriteLine（$“已保存{RegisteredParent.FirstName}{RegisteredParent.FamilyName}”）；
wait OnEdit.InvokeAsync（RegisteredParent）；
}
}

---

理想情况下，我希望在onchange事件上更新所选的父记录，而不是单击按钮在那里调用OnEdit方法。我怎样才能做到这一点呢？

我在这里没有看到服务，所以我假设没有

您的数据需要驻留在服务中。在这种情况下可能范围很广，但没有整体情况？？让我们称之为

EnrolmentService

// pseudocode
class EnrolmentService 
{

private List<dataitem> datalist {get; set;}

public Event EventHandler ListUpdated;

public dataitem GetRecord(id) .....

public bool AddRecord(dataitem) 
{
  trigger ListUpdated
 ....
}

blah, blah,...
}

因此，编辑器和列表查看器在同一服务中访问相同的数据

该服务有一个公共事件，类似于

OnListUpdated

，每次在编辑器中添加/编辑值时都会触发该事件。然后，可以将列表组件连接到事件中，并在发生更改时刷新其视图

---

一般来说，尝试将组件连接在一起不是一个好主意。

我一直保持这种通用性和简洁性。您的简历建议您需要一些指针，而不是大量具体的代码。Blazor上的MS文档非常好。作为一个插件，在Blazor和一个演示项目中有很多关于编辑的观点。

[Inject]private EnrolmentService DataService {get; set;}