本文详解 blazor 应用中跨组件传递表单数据的核心问题：为何 `formcrearnotas` 输入的内容无法正确传入 `listanotas` 并渲染到 `blocnota` 组件中，并提供符合 blazor 数据流规范的完整解决方案。
在 Blazor 中，组件间通信必须遵循明确的单向数据流原则：父组件控制状态，子组件通过 EventCallback 触发变更，再由父组件更新状态并重新渲染。您当前代码的根本问题在于：FormCrearNotas 是一个“受控表单组件”，但它未将用户输入值回传给父组件 ListaNotas，导致 NuevoTitulo 和 NuevaDescripcion 始终为 NULL 或空字符串，进而使新创建的 Nota 对象属性为空，BlocNota 无法显示任何内容（仅显示删除按钮，因组件被渲染但 Titulo/Descripcion 为空）。
✅ 正确做法：使用 EventCallback 实现双向数据回传
FormCrearNotas 不应直接持有 Titulo/Descripcion 的 setter 逻辑，而应通过强类型回调将完整表单数据提交给父组件。修改如下：
1. 更新 FormCrearNotas.razor.cs（后端逻辑）
public partial class FormCrearNotas { [Parameter] public string Titulo { get; set; } = string.Empty; [Parameter] public string Descripcion { get; set; } = string.Empty; // ✅ 关键：定义接收表单提交的强类型回调 [Parameter] public EventCallback<Nota> OnSubmit { get; set; } [Parameter] public EventCallback OnCancel { get; set; } private async Task HandleSubmit() { var nota = new Nota { Titulo = Titulo.Trim(), Descripcion = Descripcion.Trim() }; await OnSubmit.InvokeAsync(nota); // ? 触发父组件处理 } private async Task HandleCancel() => await OnCancel.InvokeAsync(); }2. 更新 FormCrearNotas.razor（前端模板）
<div class="mb-4"> <label class="block text-gray-700 font-bold mb-2">Título</label> <inputText @bind-Value="@Titulo" class="shadow appearance-none border rounded w-full py-2 px-4 text-gray-700 focus:outline-none focus:shadow-outline" /> </div> <div class="mb-6"> <label class="block text-gray-700 font-bold mb-2">Descripción</label> <InputText @bind-Value="@Descripcion" class="shadow appearance-none border rounded w-full py-2 px-4 text-gray-700 focus:outline-none focus:shadow-outline" /> </div> <div class="flex gap-2"> <SfButton CssClass="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded" OnClick="HandleCancel">Cancelar</SfButton> <SfButton CssClass="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" OnClick="HandleSubmit">Crear</SfButton> </div>⚠️ 注意： 使用 替代原生 ，确保 Blazor 表单验证和响应式更新； 移除 [Required] 数据注解（Blazor Server 不自动执行服务端验证），如需验证请配合 EditForm + DataAnnotationsValidator。
3. 更新 ListaNotas.razor（父组件调用）
<SfButton CssClass="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" @onclick="()=>MostrarFormulario=true"> Agregar Nota </SfButton> <div class="flex flex-wrap justify-center gap-4 mt-6"> @if (notas.Count == 0) { <p class="text-gray-500">No hay notas</p> } else { @foreach (var nota in notas) { <BlocNota Nota="@nota" BorrarNota="@(() => EliminarNota(nota))" /> } } </div> @if (MostrarFormulario) { <FormCrearNotas OnSubmit="AgregarNota" OnCancel="()=>MostrarFormulario=false" /> }4. 更新 ListaNotas.razor.cs
public partial class ListaNotas { public List<Nota> notas = new(); public bool MostrarFormulario { get; set; } // ✅ 接收来自 FormCrearNotas 的 Note 实例 private void AgregarNota(Nota nota) { if (!string.IsNullOrWhiteSpace(nota.Titulo) || !string.IsNullOrWhiteSpace(nota.Descripcion)) { notas.Add(nota); } MostrarFormulario = false; } private void EliminarNota(Nota nota) => notas.Remove(nota); }5. 精简 BlocNota.razor（推荐单源 truth）
<div class="m-4 p-2 rounded-lg shadow" style="background-color: @colores[new Random().Next(colores.Count)]"> <h3 class="text-white font-bold">@Nota.Titulo</h3> <p class="text-white mt-2">@Nota.Descripcion</p> <SfButton CssClass="mt-3 bg-blue-500 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm" @onclick="BorrarNota">Eliminar</SfButton> </div>public partial class BlocNota { [Parameter] public Nota Nota { get; set; } = default!; [Parameter] public EventCallback BorrarNota { get; set; } private readonly List<string> colores = new() { "#F94144", "#F3722C", "#F8961E", "#F9C74F", "#90BE6D", "#43AA8B", "#577590" }; }✅ 说明：BlocNota 应直接接收 Nota 实体，而非拆分为 Titulo/Descripcion 参数——避免冗余绑定与状态不一致风险。
? 关键总结
- 禁止“隐式状态共享”：子组件不能自行维护影响父组件状态的字段（如 FormCrearNotas.Titulo）；
- 强制显式事件驱动：所有状态变更必须通过 EventCallback
由子组件主动通知父组件； - 绑定语法规范：表单控件优先使用 @bind-Value（InputText、InputTextArea 等内置组件），而非原生 bind-value；
- 单一数据源原则：Nota 实体应在 ListaNotas 中统一管理，子组件仅负责展示与触发操作。
按此重构后，表单输入将准确传递、列表实时更新、BlocNota 正确渲染标题与描述，彻底解决“只显示删除按钮”的问题。