Как вернуть событие из элемента ввода onChange в WebComponent - PullRequest
Новая
       10

Как вернуть событие из элемента ввода onChange в WebComponent

0 голосов
/ 16 мая 2019

Я хочу создать веб-компонент, который будет возвращать мне информацию всякий раз, когда значение в элементе ввода было изменено.Я использую Stencil.js.

Вот мой код: 

import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'wp-input',
  styleUrl: 'input.css',
  shadow: true
})
export class InputComponent {

    @Prop() type: string = 'text';
    @Prop() disabled: boolean = false;
    @Prop() required: boolean = false;
    @Prop() labelTxt: string = '';
    @Prop() class: string = '';
    @Prop() value: string = '';
    @Prop() error: string = '';
    @Prop() id: string;
    @Prop() whenChange: Function;


  render() {
    return  (
        <div class={`wp-input-wrapper`}>
            <label htmlFor={this.id}>{this.labelTxt}</label>
            <input type="text"
                onInput={event => this.whenChange(event)}
                class={`wp-input`} id={this.id}
                value={this.value} required={this.required} />
            {this.error && <div class="error">
                {this.error}
            </div>}
        </div>
    )

  }
}

Я запускаю его так на своем веб-сайте: 

  <script>
    changeFunction = event => {
        console.log(event)
    }
  </script>

  <wp-input 
    when-change='changeFunction'
    value='i am here' error='adf' label-txt='Label text'></wp-input>

Но я все ещеПолучение этой ошибки:

wp-input.entry.js: 16 Uncaught TypeError: this.whenChange не является функцией

Возможно ли получить значение из Интернета?составная часть?Или как-то получить уведомление, что значение изменилось?

1 Ответ

0 голосов
/ 17 мая 2019

ОК, дайте мой ответ на мой вопрос.Чтобы добавить eventListener к вашему CustomElement, просто сделайте это: 

customElements.whenDefined('wp-input').then( () => {
  var input = document.querySelector("wp-input").shadowRoot.querySelector("input");

  input.addEventListener('keyup', event => {
    console.log(event.target.value)
  });
});
...