本文讲解如何在 Blazor 中正确复用自定义组件（如 TextArea），通过 @bind 双向绑定机制实现多个实例间状态隔离，并在父组件中分别获取各自独立的输入值。
本文讲解如何在 blazor 中正确复用自定义组件（如 textarea），通过 `@bind` 双向绑定机制实现多个实例间状态隔离，并在父组件中分别获取各自独立的输入值。
在 Blazor 开发中，经常需要在同一页面多次使用相同的功能性组件（例如多个富文本编辑区、输入框或表单字段）。但若直接重复渲染未设计为可绑定的组件（如原始示例中无参数交互的 ），所有实例会共享同一份内部状态（如 result 字段），导致数据互相覆盖，无法区分各实例的用户输入。
要解决这一问题，核心是让子组件支持可绑定属性（bindable parameter）——即遵循 Blazor 的双向绑定约定：提供一个 [Parameter] public T Value { get; set; } 和一个对应的 [Parameter] public EventCallback
以下是改造后的 TextArea.razor 组件完整实现：
@inject IJSRuntime JsRuntime @inject NavigationManager NavManager
|
|
|
✅ 关键改进说明：
- 使用 [Parameter] public required string Value 和 EventCallback
ValueChanged 构成标准绑定契约； - OnInitialized() 中初始化 result，避免首次渲染丢失初始值；
- id 属性添加唯一标识（如 @Guid.NewGuid()），防止多个
- FinishAsync() 显式触发 ValueChanged，供父组件响应“完成”动作；你也可选择监听 @bind 的实时变化（通过 @oninput 或 @bind:after），但显式提交更符合语义。
在父组件中，只需为每个
<textarea></textarea><textarea></textarea><textarea></textarea>
@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 是语法糖，等价于 ，Blazor 自动处理异步回调；
- 若子组件需支持非字符串类型（如 int, DateTime），需保持 Value 与 ValueChanged 类型一致，并在 ValueChanged.InvokeAsync(...) 中传入对应类型；
- 避免在子组件中直接修改 Value（应只读），所有状态变更必须通过 ValueChanged 回调通知父组件，以维持数据流单向性；
- 若需支持 JS 互操作（如 makeBold()），建议为每个
通过上述方式，你不仅能安全复用组件，还能清晰掌控每个实例的数据生命周期——真正实现“一次编写，多处独立使用”。
