How to advice for tabShow event on routable tab in React

Questions
1

I’m trying this way, but the event doesn’t come:

  import React from 'react';
  import { Page, PageContent, Navbar, BlockTitle, Block } from 'framework7-react';

  export default class extends React.Component {
    constructor(props) {
       super(props);
    }

    render() {
      return (   
        <Page>
          <PageContent  onTabShow={this.onTabShow.bind(this)}>
               <Navbar title="About Framework7"></Navbar>
               <BlockTitle>Welcome</BlockTitle>
           </PageContent>
         </Page>
       );
    }

    onTabShow() {
      debugger
      console.log('on tab show');
    }
};

Any help here? Really can’t find what’s the problem with the case.

Well, I think I’m starting to understand or if not so, at least tabShow event shows itself :slight_smile:

I have to paste more code to explain the problem:

My routable-tab routes

    {
      path: '/tab-view/',
      component: TabsRoutable,
      tabs : [{
         path: '/',
         id: 'tab1',
        component: Tab1
      }, {
         path: '/tab2/',
         id: 'tab2',
        component: Tab2
      }]
   },

TabsRoutable is defined in routable-tab.jsx

import React from 'react';
import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar } from 'framework7-react';

export default () => (
<Page pageContent={false}>
<Navbar title="Tabs Routable" backLink="Back"></Navbar>
<Toolbar tabbar>
  <Link tabLink href="./" routeTabId="tab1">Tab 1</Link>
  <Link tabLink href="tab2/" routeTabId="tab2">Tab 2</Link>
</Toolbar>
<Tabs routable>
  <Tab className="page-content" id="tab1"></Tab>
  <Tab className="page-content" id="tab2"></Tab>
</Tabs>
</Page>
)

And Tab1 is defined in tab1.jsx and the source code is at the start of the post.

The thing is that in the standard framework I receive tabShow in tab1.js using on: { tabShow : function() etc. } and I believe that it’s the wright place to be.

Now with React, I wasn’t able to advice in tab1.jsx, but I can change tabs-routable.jsx in the way that the event is coming. Below is how I do this:

import React from 'react';
import { Navbar, Page, Block, Tabs, Tab, Link, Toolbar } from 'framework7-react';

export default class extends React.Component {
  constructor(props) {
    super(props);
}

render() {
return (
  <Page pageContent={false}>
  <Navbar title="Tabs Routable" backLink="Back"></Navbar>
  <Toolbar tabbar>
    <Link tabLink href="./" routeTabId="tab1">Tab 1</Link>
    <Link tabLink href="tab2/" routeTabId="tab2">Tab 2</Link>
  </Toolbar>
  <Tabs routable>
    <Tab className="page-content" id="tab1" onTabShow={this.onTabShow}></Tab>
    <Tab className="page-content" id="tab2"></Tab>
  </Tabs>
  </Page>
    );
}

onTabShow() {
    debugger
    console.log('on tab show');
}

}

Although this is working I don’t believe it’s the proper place to receive the event. Now I have to redistribute it somehow to Tab1 component, which gives me the sensation that I’m not doing all goof again. I’m looking for better way to reimplement this code.

2
  1. First of all don’t use Page in Page structure. Routable tabs content shouldn’t contain Page
  2. You did it correct. onTabShow event will be fired on parent <Tab> component, so you can’t really track it in component. But by default routable tabs got unload/unmount when hidden, so basically your React’s componentDidMount should work fine instead of tabShow