如何在 Blazor 中重复使用同一组件并分别管理多个实例的状态

本文讲解如何在 Blazor 中正确复用自定义组件（如 TextArea），通过 @bind 双向绑定机制实现多个实例间状态隔离，并在父组件中分别获取各自独立的输入值。

本文讲解如何在 blazor 中正确复用自定义组件（如 textarea），通过 `@bind` 双向绑定机制实现多个实例间状态隔离，并在父组件中分别获取各自独立的输入值。

在 Blazor 开发中，经常需要在同一页面多次使用相同的功能性组件（例如多个富文本编辑区、输入框或表单字段）。但若直接重复渲染未设计为可绑定的组件（如原始示例中无参数交互的 <TextArea/>），所有实例会共享同一份内部状态（如 result 字段），导致数据互相覆盖，无法区分各实例的用户输入。

要解决这一问题，核心是让子组件支持可绑定属性（bindable parameter）——即遵循 Blazor 的双向绑定约定：提供一个 [Parameter] public T Value { get; set; } 和一个对应的 [Parameter] public EventCallback<T> ValueChanged { get; set; }。这样，父组件可通过 @bind-Value 语法与每个子组件建立独立的数据通道。

以下是改造后的 TextArea.razor 组件完整实现：

@inject IJSRuntime JsRuntime@inject NavigationManager NavManager<table width="100%">    <tr>        <td>            <table width="100%">                <tr>                    <td>                        <button onclick="makeBold()">put bold</button>                    </td>                </tr>            </table>        </td>    </tr>    <tr>        <td>            <textarea class="custom-textarea"                       id="[email protected]()"                       @bind="result"                       placeholder="Deutsche Beschreibung"                       rows="5"></textarea>        </td>    </tr></table><button @onclick="FinishAsync">finish</button>@code {    [Parameter] public required string Value { get; set; }    [Parameter] public required EventCallback<string> ValueChanged { get; set; }    private string result = "";    protected override void OnInitialized()    {        // 初始化时同步外部传入的 Value 到内部 result，确保首次渲染显示正确值        result = Value;    }    private async Task FinishAsync()    {        // 触发回调，将当前 result 值通知父组件        await ValueChanged.InvokeAsync(result);    }    // 当内部 result 变化时（如用户输入），也应同步更新绑定值（可选，但推荐）    private async Task OnResultChanged(string newValue)    {        result = newValue;        await ValueChanged.InvokeAsync(result);    }}

✅ 关键改进说明：

• 使用 [Parameter] public required string Value 和 EventCallback<string> ValueChanged 构成标准绑定契约；
• OnInitialized() 中初始化 result，避免首次渲染丢失初始值；
• id 属性添加唯一标识（如 @Guid.NewGuid()），防止多个 <textarea> 共享同一 ID 引发 DOM 冲突（尤其在 JS 互操作中）；
• FinishAsync() 显式触发 ValueChanged，供父组件响应“完成”动作；你也可选择监听 @bind 的实时变化（通过 @oninput 或 @bind:after），但显式提交更符合语义。

在父组件中，只需为每个 <TextArea> 实例声明独立的绑定字段，并使用 @bind-Value 语法：

<TextArea @bind-Value="Value1" /><TextArea @bind-Value="Value2" /><TextArea @bind-Value="Value3" />@code {    private string Value1 { get; set; } = string.Empty;    private string Value2 { get; set; } = string.Empty;    private string Value3 { get; set; } = string.Empty;    // 如需在任意时刻读取全部值（例如点击“提交”按钮），可直接访问这些字段    private void HandleSubmit()    {        Console.WriteLine($"Value1: '{Value1}', Value2: '{Value2}', Value3: '{Value3}'");        // 进行业务处理...    }}

⚠️ 注意事项：

• @bind-Value 是语法糖，等价于 <TextArea Value="@Value1" ValueChanged="@((v) => Value1 = v)" />，Blazor 自动处理异步回调；
• 若子组件需支持非字符串类型（如 int, DateTime），需保持 Value 与 ValueChanged 类型一致，并在 ValueChanged.InvokeAsync(...) 中传入对应类型；
• 避免在子组件中直接修改 Value（应只读），所有状态变更必须通过 ValueChanged 回调通知父组件，以维持数据流单向性；
• 若需支持 JS 互操作（如 makeBold()），建议为每个 <textarea> 设置唯一 ID 并在 JS 中通过 event.target.closest('...') 定位上下文，避免全局 ID 冲突。

通过上述方式，你不仅能安全复用组件，还能清晰掌控每个实例的数据生命周期——真正实现“一次编写，多处独立使用”。