离子输入获取元素参考香草JS

Question

我正在使用scencen.js创建一个框架不可思议的Web组件，并包含一些Ionic4 Web组件，包括<ion-input>

ion-input的文档显示了一种方法getInputElement() => Promise<HTMLInputElement>以访问本机<input>，但我找不到正确使用它来公开组件中内部元素的正确方法。

getInputElement如何使用？

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {    
  @Element() el: HTMLElement;
  @Prop .... ///some props
  @State ... // some state
  componentDidLoad(){}
  render() (
      <div className="foo">
        <ion-item>
          <ion-label> {this.someProp}</ion-label>
          <ion-input          
            value={this.someProp}
            clear-input={this.someProp}            
            onInput={this.handleInput} /> 
        </ion-item>
       <div>...more</div>
      </div>
    )
}

Answer 1

我认为您可以使用ref功能(可能应该输入此(这样做这样的事情：

ionInputElement;
@Element() el: HTMLElement;
@Prop .... ///some props
@State ... // some state
componentDidLoad(){
  this.ionInputElement.getInputElement().then((el) => this.el = el);
}
render() {
  return (
    <div className="foo">
      <ion-item>
        <ion-label> {this.someProp}</ion-label>
        <ion-input ref={(el) => this.ionInputElement = el}         
          value={this.someProp}
          clear-input={this.someProp}            
          onInput={this.handleInput} /> 
      </ion-item>
      <div>...more</div>
    </div>
  );
}

Answer 2

您可以使用ref Prop获得对JSX元素的引用。例如：

<ion-input ref={input => this.ionInput = input}

然后，在组件的一种方法中，您可以以this.ionInput.getInputElement()

访问它

请参阅https://stenciljs.com/docs/templating-jsx#getting-a-reference-to-a-a-dom-lement