0

我想使用 stencil 构建一个范围滑块。

范围滑块上方是一个h1应该返回滑块的正确值的滑块。

我使用一个Listen-Event，它会监听是否range-slider被点击（我也尝试过改变，但没有奏效）。如果单击它，handleChangeEvent则执行。在这种方法中，我有我meinSlider以前分配给的变量input type="range"。在这个变量上，我使用addEventListener，它监听“变化”，然后我使用document.querySelector并选择我的span元素，它应该给出正确的数字并将其分配给范围滑块的值：

document.querySelector(".regler-wertung span").innerHTML = this.value;

但是，它不起作用，如果我使用console.log它，它会返回null。 我想我无法访问 HTML-Element。

此外，我有一个错误：

TypeError：无法在 regler.changeEvent、regler.handleChangeEvent、HTMLElement.listenMeta.eventDisabled.plt.domApi.$addEventListener.ev读取属性“addEventListener”

我不是专业人士，对 Stencil 没有任何经验。

我非常感谢任何帮助。

不确定这是否重要，但我也在使用Electron，因为它是一个桌面应用程序。

这是我的 .tsx：

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

@Component({
    tag: 'regler-wertung',
    styleUrl: 'regler.css',
    shadow: false
})
export class regler {
    @Prop() regler: string;
    @Prop() value: number;

    meinSlider=document.querySelector('#myRange')

    @Listen ('click', {capture: true})
    handleChangeEvent(){
      this.meinSlider.addEventListener("change", function(){ 
        document.querySelector(".regler-wertung span").innerHTML = this.value; 
        })
      }
    render() {
     return (
        <div>
            <h1 class="regler-wertung">gewichtete Punkte von 0-10: {this.regler} <span>0</span></h1>
            <input type="range" id="myRange" class="slider" value="0" min="0" max="10" ></input>
        </div>
          )
        }
}
4

1 回答 1

0

这是解决方案。

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

@Component({
    tag: 'regler-wertung',
    styleUrl: 'regler.css',
    shadow: false
})
export class regler {
    @Prop() regler: string = "defaultRegler";
    @Prop() value: number = 50;

    meinSlider!: HTMLInputElement; // Added for this error Cannot read property 'addEventListener'

    @Listen('click', { capture: true })
    handleChangeEvent() {
        this.meinSlider.addEventListener("change", function () {
            // not required now
            // document.querySelector(".regler-wertung span").innerHTML = this.value;
        })
    }

    updateValue(event: Event) {
        this.value = parseInt((event.target as HTMLInputElement).value);
    }

    render() {
        return (
            <div>
                <h1 class="regler-wertung">gewichtete Punkte von 0-10: {this.regler} <span>{this.value}</span></h1>
                <input type="range" id="myRange" class="slider" value="0" min="0" max="10" onChange={this.updateValue} ref={ele => this.meinSlider = ele as HTMLInputElement}></input>
            </div>
        )
    }
}

更新值： 我添加了更新道具的updateValue方法（在onChange事件上调用）。

对于 null 错误的 addEventListener：我已更新meinSlider还添加了在输入标记中更新此变量看看。

于 2020-08-03T10:32:05.173 回答