Add JQuery Toggle Class in Stencil/Electron

问题

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 code:

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>
    );
  }
}

回答1:

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.

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.

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).

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.

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>
    );
  }
}

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

来源：https://stackoverflow.com/questions/61368457/add-jquery-toggle-class-in-stencil-electron