StencliJS 获取子组件的引用答案

【问题标题】：StencliJS get ref of child componentStencliJS 获取子组件的引用
【发布时间】：2022-01-18 13:51:07
【问题描述】：

我有一个父组件和一个子组件。子组件创建带有动态引用的表单输入字段来获取值或像这样进行验证：

  private buildTextField(formElement:FormBuilderElement):HTMLInputElement {
    return <input type="text"
      name={formElement.name}
      id={formElement.name}
      value=""
      required={formElement.required}
      ref={(el) => this[`${formElement.name}_ref`] = el as HTMLInputElement} />
  }

  render() {
    return (
      <Host>
        {
          this.formElements.map((fe) => (
                <div>
                  <div>{this.buildInput(fe)}</div>
                </div>
          ))
        }
      </Host>
    );
  }

this.formElements 是从父级传入的 Prop。您会看到 ref 是从 FormBuilderElement 的 name 属性动态创建的。在子组件中，我可以使用 this[${dynamicName}_ref] 引用 ref，并且我完美地获得了 HTMLInputElement。

现在这个子组件在父组件渲染中创建，如下所示：

  render() {
    return (
      <Host>
        <div>
            {
            
              <my-form formElements={this.formElements} ref={(el) =>  this.myformchild = el as HTMLElement} ></my-form>
            }
        </div>
      </Host>
    );
  }

你看我也给我的表单添加了一个引用。所以现在我想通过它们的引用从 my-form 子组件中获取 HTMLInputElements。所以我原以为这应该可行，但我只是得到 undefined:

const requiredElement = this.myformchild [`${dynamicName}_ref`];

引用子组件中指定的引用的正确方法是什么？

【问题讨论】：

标签： jsx ref stenciljs

【解决方案1】：

最后，我们在子组件中添加了一个 @Method 来获取对类的引用，该类为我们提供了所有 ref 变量。所以添加对子组件的引用，调用方法获取类的实例：

家长参考

<my-form formElements={this.formElements} ref={(el) =>  this.myformchild = el as HTMLElement} ></my-form>

子组件方法

  @Method() 
  async getForm(){
    return this;
  }

那么调用它的父级，必须在异步块或方法中

const form = this.myformchild.getForm();
const inputElement = form[`${dynamicName}_ref`]

【讨论】：