如何在继承antdesign Razor组件时为动态创建的组件设置引用

结论 #

你要的需求完全可以实现，你现有代码的引用捕获逻辑本身没有问题，无法正常运行大概率是两个原因：一是私有变量_ref没有对外暴露，外部无法访问；二是没有透传父组件的参数，导致内部渲染的Input行为不符合预期，让你误以为引用捕获失败，只需要简单调整即可。

具体修改方案 #

• 将内部捕获引用的私有变量改为公开属性，方便外部使用InputWrapper时直接访问内部的AntDesign Input实例
• 透传父组件Input<string>的所有原生参数到内部渲染的Input组件，避免Value、Placeholder等原生属性传入后不生效
• 可选：如果要完全对齐原生Input的使用体验，可以在Wrapper中直接转发InnerInput的所有公开方法和属性，外部不需要额外访问.InnerInput

调整后完整代码 #

@inherits Input<string>

@RenderBase()

@code {
    // 公开内部Input引用给外部调用
    public Input<string> InnerInput { get; private set; }

    RenderFragment RenderBase() => builder =>
    {   
        var callback = EventCallback.Factory.Create<FocusEventArgs>(this, arg =>
        {
            // 你的自定义OnFocus逻辑
        });
        builder.OpenComponent(0, typeof(Input<string>));
        // 透传所有额外参数
        builder.AddMultipleAttributes(1, AdditionalAttributes);
        // 透传绑定核心属性
        builder.AddAttribute(2, nameof(Value), Value);
        builder.AddAttribute(3, nameof(ValueChanged), ValueChanged);
        builder.AddAttribute(4, nameof(OnFocus), callback);
        builder.AddAttribute(5, nameof(AllowClear), true);
        // 捕获内部组件引用
        builder.AddComponentReferenceCapture(6, (__value) => {
            InnerInput = (Input<string>)__value;
        });
        builder.CloseComponent();   
    };
}

使用示例 #

不需要每次使用都单独声明内部Input的引用，直接通过Wrapper实例的公开属性访问即可：

<InputWrapper @ref="@inputWrapper" Placeholder="请输入内容" />

<button @onclick="() => inputWrapper.InnerInput.Focus()">手动触发输入框聚焦</button>

@code {
    // 仅需声明Wrapper的引用即可
    private InputWrapper inputWrapper;
}

内容的提问来源于stack exchange，提问作者Lachevre