在StencilElectron中添加JQuery Toggle类。

Posted 2021-03-19

我正在用钢网构建一个电子应用程序，我想让一个div-container在我点击按钮时可见。我想让一个div-container可见，当我点击一个按钮。我导入了jQuery库，但是这个函数并没有让toggleClass-method生效。它只是显示控制台.log()。谁能帮帮我？

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，这将使你的代码更容易理解。

你的代码之所以只记录了 "hi" 但什么也没做，是因为你想把点击处理程序添加到 .aufklapp-button但 $('.aufklapp-button') 将永远找不到那个元素，因此永远不会附加点击监听器，因为你已经为你的组件启用了Shadow DOM，这将使你的组件内部从外部无法访问。

总之，你使用的是一个 click 事件监听器，这意味着你的按钮只有在你点击了一次组件之后才会工作（如果jQuery能够找到你的按钮的话，但事实并非如此）。

你应该直接给按钮附加一个点击处理程序，使用元素的 onClick 支持。然后你可以使用该点击处理程序来简单地切换组件类的一个状态成员，然后使用该状态成员来切换你的渲染模板中带有条件的CSS类。

我注意到你的代码的另一个问题是你没有导入 h 从Stencil v1.0.0开始就需要了（如果您使用的是它）。

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组件的API文档，以便更好地了解你可以用不同的装饰器和生命周期事件做什么。你可以在这里找到它。

https:/stenciljs.comdocsdecorators。