使用 Stencil 构建范围滑块答案

【问题标题】：Build range-slider using Stencil使用 Stencil 构建范围滑块
【发布时间】：2020-08-03 18:37:11
【问题描述】：

我想用模板构建一个范围滑块。

范围滑块上方是一个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 元素。

另外，我有一个错误：

TypeError: Cannot read property 'addEventListener' of null 在 regler.changeEvent、在 regler.handleChangeEvent、在 HTMLElement.listenMeta.eventDisabled.plt.domApi.$addEventListener.ev

我只是专业人士，对 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>
          )
        }
}

【问题讨论】：

stackoverflow.com/questions/61368457

标签： typescript slider range stenciljs stencil-component

【解决方案1】：

这是解决方案。

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 事件上调用），我正在更新道具。

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

【讨论】：