devel.cz

Pohrávám si s React.js a při integraci React + Bootstrap záložky jsem narazil na zvláštní problém. Snažím se odchytit bootstrapí event "shown.bs.tab" (tab zobrazen) v componentDidMount metodě kódem z bootstrap dokumentace:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Debuggerem jsem zjistil, že event je opravdu vypálen, ale nikdy se nedostanu k jeho obsluze. Při experimentování s vlastním eventem jsem narazil na zvláštní chování, pokud event obsahuje namespace (tedy tečku v názvu). Takový event se mi nedaří zachytit, zatímco tentýž bez namespace ano.

Na zjednodušeném příkladu:

  componentDidMount() {
    var event = new Event('click.mycomponent');
    $(window).on('click.mycomponent', function() {
        console.log('click.mycomponent');
    });
    window.dispatchEvent(event);
 
    var event2 = new Event('clickmycomponent');
    $(window).on('clickmycomponent', function() {
       console.log('clickmycomponent');
    });
    window.dispatchEvent(event2);
  }

Event "clickmycomponent" projde a vypíše se v consoli, zatímco "click.mycomponent" projde nezachycen.

Netušíte, co dělám špatně, případně zda za to může React, JQuery, Bootstrap nebo něco úplně jiného? Kam event mizí a proč není zachycen?

Díky,
Tomáš