Example 1:
click on tab1
. Tab 1 is active tab. Click again on tab1
(tab1 is active tab) I don't want to call function start()
. Click on tab 2 or tab 3 I want to call function start()
.
Example 2:
click on tab2
. Tab 2 is active tab. Click again on tab2
(tab 2 is active tab) I don't want to call function start()
. Click on tab 1 or tab 3 I want to call function start()
.
Code here: https://codepen.io/kaka-milan/pen/YmXJJy?editors=1111
Drawing: https://imgur.com/ApsUxZo
var Tab = React.createClass({
render: function() {
return <li
className={ this.props.isActive ? 'navigation--active': '' }
onClick={ this.props.onActiveTab }
>
<p>{ this.props.content }</p>
</li>
}
});
var Tabs = React.createClass({
getInitialState: function() {
return { selectedTabId: 1 }
},
isActive: function (id) {
return this.state.selectedTabId === id;
},
setActiveTab: function (selectedTabId) {
this.start();
this.setState({ selectedTabId });
},
start: function() {
return console.log('aaa')
},
render: function() {
var total = this.props.data.points.total,
tabs = total.map(function (el, i) {
return <Tab
key={ i }
content={ el.name }
isActive={ this.isActive(el.id) }
start= {this.start}
onActiveTab={ this.setActiveTab.bind(this, el.id) }
/>
}, this);
return <ul className="navigation">
{ tabs }
</ul>
}
});
const data = {
points: {
total: [
{ id: 1, name: 'tab-1', text: 'text' },
{ id: 2, name: 'tab-2', text: 'text-2' },
{ id: 3, name: 'tab-3', text: 'text-2' }
]
}
}
ReactDOM.render(
<Tabs data={ data } />,
document.getElementById('main')
);