Добавить JQuery Toggle Class в трафарет / электрон - PullRequest
Новая
       21

Добавить JQuery Toggle Class в трафарет / электрон

0 голосов
/ 22 апреля 2020

Я создаю электронное приложение с трафаретом. Я хочу сделать div-контейнер видимым, когда я нажимаю кнопку. Я импортировал библиотеку jQuery, но функция не создает метод toggleClass. Это просто показывает console.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>
    );
  }
}

1 Ответ

1 голос
/ 22 апреля 2020

Вам не нужно jQuery для этого, трафарет. js предоставляет все API-интерфейсы из коробки, которые вам необходимы для реализации, и это сделает ваш код более простым для понимания.

Причина, по которой ваш код только регистрирует "hi", но ничего не делает, состоит в том, что вы пытаетесь добавить обработчик щелчка к .aufklapp-button, но $('.aufklapp-button') никогда не найдет этот элемент и, следовательно, никогда не присоединит прослушиватель щелчка, потому что вы включили Shadow DOM для своего компонента, который по своей конструкции сделает внутренние компоненты вашего компонента недоступными извне.

В любом случае, вы используете click прослушиватель событий на хосте компонента для подключения указанного прослушивателя, это означало бы, что ваша кнопка сработала бы только после того, как вы щелкнули компонент один раз (если бы jQuery смог бы найти вашу кнопку, а это не так).

Вместо этого следует прикрепить щелчок непосредственно к кнопке, используя элемент onClick prop. Затем вы можете использовать этот обработчик щелчков, чтобы просто переключать член состояния класса компонента, а затем использовать этот член состояния, чтобы переключать классы 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>
    );
  }
}

Я предлагаю вам прочитать документацию API Stencil Component, чтобы получить лучшее понимание того, что вы можете делать с различными декораторами и событиями жизненного цикла. Вы можете найти его здесь:

https://stenciljs.com/docs/decorators

...