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