本文详解 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 正确渲染标题与描述，彻底解决“只显示删除按钮”的问题。
