为什么我可以访问父组件中的表单输入值？

Question

基本上我有 2 个 blazor 组件，子组件 (NewChecklist.razor) 是一种表单，它将输入值作为在其父组件 (ChecklistManagement.razor) 中传递的参数。我意识到这些值在父组件中未被识别，因为当我尝试提交新的 Checklist 时，它基本上是一个空列表，其中所有值都丢失了。此时，我只是尝试将第一个输入的值记录到控制台，即使我正在努力

子组件（NewChecklist.razor）：

@using SFSCheckList.Data.Repos

<h3>NewChecklist</h3>

<p>kahdjakhflkajfke</p>




<form @onsubmit="AddCheckList">
    <div>
        <input @bind-value="Name" label="Title"  Style="width: 25rem"></input>
    </div>
    <div>
        <FluentTextField @bind-Value="Description" label="Description"  Style="width: 25rem"></FluentTextField>
    </div>
    <p></p>
    <div style="display: flex">
        <div style="display: flex; flex-direction: column;">
            <label>Start Date</label>
            <FluentDatePicker Value="@(StartDate)" ValueChanged="@(e => StartDate = e.Value)"  />
        </div>
        <div style="display: flex; flex-direction: column;">
            <label>End Date</label>
            <FluentDatePicker Value="@EndDate" ValueChanged="@(e => EndDate = e.Value)"  Style="margin-left: 5px;" />
        </div>
    </div>
 

        <button>Submit</button>
    
</form>

@code {
    [Inject]
    protected ChecklistRepo? checklistRepo { get; set; }

    [Parameter]
    public string Name { get; set; } = string.Empty;
    [Parameter]
    public string Description { get; set; } = string.Empty;
    [Parameter]
    public DateTime StartDate { get; set; } = DateTime.Now;
    [Parameter]
    public DateTime EndDate { get; set; } = DateTime.Now;

    [Parameter]
    public EventCallback AddCheckList { get; set; }

    // private async Task SubmitChecklist()
    // {
    //     Console.WriteLine(Name);
    //     Console.WriteLine(Description);
    //     // You can perform further operations like adding the checklist to the database here
    //     await AddCheckList.InvokeAsync();
    // }

}

父组件（ChecklistManagement.razor）：

@page "/ManageChecklists"
@using SFSCheckList.Data.Repos
@using SFSCheckList.Components.Checklists

<h3>Checklist Management</h3>
<div style="display: flex;">
    <div style="border: 1px solid black; border-radius: 5px; padding: 1rem; background: #F1F3F9; min-height: 30rem; min-width: 25rem;">
        <CheckListList Checklists="@Checklists" OnChecklistSelected="HandleChecklistSelected" isAddingEnabled="isAddingEnabled" EnableAddChecklist="EnableAddChecklist"/>
    </div>

    <div style="margin-left: 3rem;border: 1px solid black; border-radius: 5px; padding: 1rem; background: #F1F3F9; min-height: 30rem; min-width: 25rem;">
        @if (isAddingEnabled)
        {
            <NewChecklist Name="@ChecklistName" Description="@ChecklistDescription" StartDate="@AvailableStartDate" EndDate="@AvailableEndDate" AddCheckList="SubmitChecklist"/>
        }
        else
        {
            <ChecklistDetails Checklist="SelectedChecklist" EnableEditChecklist="EnableEditChecklist" isEditingEnabled="isEditingEnabled" />
        }
    </div>
</div>

@code {
    [Inject]
    protected ChecklistRepo? checklistRepo { get; set; }

    public bool isAddingEnabled { get; set; } = false;
    public bool isEditingEnabled { get; set; } = false;
    public string ChecklistName { get; set; } = string.Empty;
    public string ChecklistDescription { get; set; } = string.Empty;
    public DateTime AvailableStartDate { get; set; } = DateTime.Now;
    public DateTime AvailableEndDate { get; set; } = DateTime.Now;
    public SFSCheckList.Data.Models.Checklist? SelectedChecklist { get; set; }
    List<SFSCheckList.Data.Models.Checklist> Checklists = new List<SFSCheckList.Data.Models.Checklist>();

    //enable edit functionality
    public void EnableEditChecklist()
    {
        Console.WriteLine("Edit Checklist");
        isEditingEnabled = !isEditingEnabled;
    }

    public void EnableAddChecklist()
    {
        Console.WriteLine("Adding Checklist");
        isAddingEnabled = !isAddingEnabled;
    }

    // method to submit checklist
    async Task SubmitChecklist()
    {
        // var newChecklist = new SFSCheckList.Data.Models.Checklist()
        //     {
        //         ChecklistName = ChecklistName,
        //         ChecklistDescription = ChecklistDescription,
        //         AvailableStartDate = AvailableStartDate,
        //         AvailableEndDate = AvailableEndDate,
        //         FY = "2024",
        //         LCTS = DateTime.Now
        //     };

        // await checklistRepo.UpsertChecklist(newChecklist);
        // Checklists.Add(newChecklist);
        // StateHasChanged();
        Console.WriteLine("the Checklist name is " + ChecklistName);
    }


    // method to get checklists
    async Task GetChecklists()
    {
        Checklists = await checklistRepo.GetChecklists();
        var checklists = await checklistRepo.GetChecklists();
        foreach (var checklist in checklists)
        {
            Console.WriteLine(checklist.ChecklistName);
        }
    }
    protected override async Task OnInitializedAsync()
    {     
        await base.OnInitializedAsync();
       await GetChecklists();
    }
    // method to handle checklist selected
    private void HandleChecklistSelected(SFSCheckList.Data.Models.Checklist checklist)
    {
        SelectedChecklist = checklist;
        Console.WriteLine($"Checklist Selected:");
        Console.WriteLine($"Name: {checklist.ChecklistName}");
        StateHasChanged();
    }

}

我尝试在多次失败的尝试中访问这些值，最终目标是能够从表单中获取所有值（ChecklistName、ChecklistDescription 等）并成功创建一个新的清单，但截至目前，我只是在尝试访问 console.writeline 语句中的值以确保其正常工作

Answer 1

在 C# 中，您无法直接从父组件访问表单输入值，因为表单输入值通常在定义表单的子组件中存储和管理。

要从父组件访问表单输入值，通常需要在父组件和子组件之间建立通信。这可以通过各种机制来实现，例如：

将数据作为参数传递：在子组件中定义属性或字段以保存表单输入值。公开子组件中的方法或属性，以允许父组件通过将它们作为参数传递来访问这些值。

使用事件和事件处理程序：在子组件中定义自定义事件，以便在表单输入值更改时通知父组件。在父组件中实现事件处理程序以响应这些事件并从子组件检索更新的值。

使用回调函数：在父组件中定义回调函数或委托，并将它们作为参数传递给子组件。然后子组件可以调用这些回调函数将表单输入值传递回父组件。

使用 Refs 或 References：使用引用或 ref 参数直接从父组件访问子组件实例。这允许父组件访问子组件的公共属性或方法，包括表单输入值。

使用状态管理：如果您使用状态管理库或框架（例如，React with Redux），您可以将表单输入值存储在父组件和子组件都可以访问的集中式状态容器中。对表单输入值的更改可以通过状态管理系统传播，从而允许父组件根据需要访问它们。

总的来说，您选择的方法取决于应用程序的具体要求、组件层次结构的复杂性以及您首选的编程风格。这些通信机制中的每一种都有其优点和缺点，因此请选择最适合您的用例的一种。