Blazor组件参数传递与表单绑定方法

本文深入剖析了Blazor中组件间表单数据传递失效的典型问题——为何FormCrearNotas输入的内容无法在ListaNotas中正确创建并渲染到BlocNota组件，直击“子组件状态隐式维护”与“缺失显式事件驱动”两大根源，并提供一套严格遵循Blazor单向数据流规范的完整解决方案：通过EventCallback实现强类型、可验证的表单提交回传，统一由父组件ListaNotas管理Note实体状态，精简子组件参数绑定逻辑，彻底解决标题和描述为空、仅显示删除按钮的尴尬现象，让表单交互真正可靠、可维护、符合框架设计哲学。

本文详解 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>

⚠️ 注意：

• 使用 替代原生 <input bind-value>，确保 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 正确渲染标题与描述，彻底解决“只显示删除按钮”的问题。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~