ионный ввод получить элемент эталонный ваниль JS - PullRequest
Новая
       21

ионный ввод получить элемент эталонный ваниль JS

0 голосов
/ 30 апреля 2019

Я использую stencil.js для создания веб-компонента, который не зависит от инфраструктуры и содержит некоторые веб-компоненты ionic4, включая <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>
    )
}

Ответы [ 2 ]

1 голос
/ 01 мая 2019

Я бы предположил, что вы можете сделать что-то подобное, используя функцию 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>
  );
}
1 голос
/ 01 мая 2019

Вы можете получить ссылку на элемент JSX, используя ref prop.Например: 

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

Затем в одном из методов вашего компонента вы можете получить к нему доступ как this.ionInput.getInputElement()

Подробнее на https://stenciljs.com/docs/templating-jsx#getting-a-reference-to-a-dom-element

...