在Stencil/Electron中添加JQuery Toggle类 [英] Add JQuery Toggle Class in Stencil/Electron

问题描述

我正在用模板建立一个电子应用程序.我想在单击按钮时使div容器可见.我导入了jQuery库，但该函数未生成toggleClass方法.它仅显示console.log().可以请人帮我吗?

I'm building an electron app with stencil. I want to make a div-container visible, when I click a button. I imported jQuery library but the function doesn't make the toggleClass-method. It just shows the console.log(). Can please someone help me?

my-component.tsx 代码:

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


@Component({
  tag: 'aufklapp-button',
  styleUrl: 'aufklapp-button.css',
  shadow: true
})


export class AufklappButton {

  @Prop() test: string;

  @Listen('click',  { capture: true }) 
  buttonClickedHandler(){
    $(document).ready(function(){
      $(".aufklapp-button").click(function(){
        $(".aufklapp-container").toggleClass("shown");
        $(".aufklapp-button").toggleClass("changeradius");
      });
    });
    console.log('hi')
  }

  render() {
    return (
      <div id="container-button">
        <input class="aufklapp-button" type="button" value="Platzhalter für Kategorie"></input>
        <div class="aufklapp-container">
          <table class="table">
            <tbody>
              <tr>
                <td></td>
                <td>Zielerreichung in %</td>
              </tr>
              <tr>
                <td>Kriterium 1</td>
                <td>Regler</td>
              </tr>
              <tr>
                <td>Kriterium 2</td>
                <td>Regler</td>
              </tr>     
              <tr>
                <td>Kriterium 3</td>
                <td>Regler</td>
              </tr>
              <tr>
                <td>Kriterium 4</td>
                <td>Regler</td>
              </tr>                      
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

推荐答案

您并不需要jQuery，Stencil.js提供了实现此功能所需的所有API.代码更容易理解.

You don't really need jQuery for this, Stencil.js provides all the APIs out of the box that you need to implement this, and it will make your code more easy to understand.

您的代码仅记录"hi" 而不执行任何操作的原因是因为您试图向 .aufklapp-button 中添加点击处理程序，但是 $('.aufklapp-button')将永远找不到该元素，因此也永远不会附加单击侦听器，因为您已经为组件启用了Shadow DOM，从设计上来说，这将使您的组件内部无法访问外面.

The reason your code is only logging "hi" but not doing anything is because you're trying to add a click handler to .aufklapp-button, but $('.aufklapp-button') will never find that element, and therefore never attach the click listener, because you have enabled Shadow DOM for your component, which by design will make your component internals inaccessible from the outside.

无论如何，您在组件主机上使用 click 事件监听器来附加所说的监听器，这意味着您的按钮只有在您单击组件一次后才能工作(如果jQuery可以，却无法找到您的按钮).

Anyway, you're using a click event listener on the component host to attach said listener, which would mean that your button would have only worked after you have clicked the component once (if jQuery would have been able to find your button which isn't the case).

您应该改为使用元素的 onClick 道具将点击处理程序直接附加到按钮上.然后，您可以使用该单击处理程序来简单地切换组件类的状态成员，然后使用该状态成员来切换呈现模板中带有条件的CSS类.

You should instead attach a click handler to the button directly, using the element's onClick prop. Then you can use that click handler to simply toggle a state member of the component class, and then use that state member to toggle the CSS classes with conditionals in your rendered template.

我在您的代码中注意到的另一个问题是您没有导入 h ，这是Stencil v1.0.0(如果使用的话)所必需的.

Another problem I noticed with your code is that you're not importing h which is required since Stencil v1.0.0 (if you're using that).

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

@Component({
  tag: 'aufklapp-button',
  styleUrl: 'aufklapp-button.css',
  shadow: true
})
export class AufklappButton {
  @Prop() test: string;

  @State() visible = false;

  toggleVisibility = () => {
    this.visible = !this.visible;
  }

  render() {
    return (
      <div id="container-button">
        <input
          onClick={this.toggleVisibility} // <-- attaching the listener here
          class={{
            'aufklapp-button': true,
            changeradius: this.visible // <-- using an object to toggle the class here
          }}
          type="button"
          value="Platzhalter für Kategorie"
        />
        <div
          class={{
            'aufklapp-container': true,
            shown: this.visible // <-- and also here
          }}
        >
          <table class="table">
            <tbody>
              <tr>
                <td></td>
                <td>Zielerreichung in %</td>
              </tr>
              <tr>
                <td>Kriterium 1</td>
                <td>Regler</td>
              </tr>
              <tr>
                <td>Kriterium 2</td>
                <td>Regler</td>
              </tr>     
              <tr>
                <td>Kriterium 3</td>
                <td>Regler</td>
              </tr>
              <tr>
                <td>Kriterium 4</td>
                <td>Regler</td>
              </tr>                      
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

我建议您通读Stencil Component API文档，以更好地了解使用不同的装饰器和生命周期事件可以做什么.您可以在这里找到它:

I suggest that you read through the Stencil Component API documentation to get a better understanding of what you can do with the different decorators and lifecycle events. You can find it here:

https://stenciljs.com/docs/decorators

这篇关于在Stencil/Electron中添加JQuery Toggle类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！