示例1:
单击tab1
。选项卡 1 是事件选项卡。再次单击 tab1
(tab1 是事件选项卡)我不想调用函数 start()
。单击选项卡 2 或选项卡 3 我想调用函数 start()
。
示例2:
单击tab2
。选项卡 2 是事件选项卡。再次单击 tab2
(选项卡 2 是事件选项卡)我不想调用函数 start()
。单击选项卡 1 或选项卡 3 我想调用函数 start()
。
此处代码:https://codepen.io/kaka-milan/pen/YmXJJy?editors=1111
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')
);
最佳答案
您可以添加一个条件来检查单击的选项卡是否已被选中,如果已选中,则不执行任何操作,否则正常运行
setActiveTab: function (selectedTabId) {
if(!this.isActive(selectedTabId)){
this.start();
this.setState({ selectedTabId });
}
},
关于javascript - 如何防止在事件选项卡上调用函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57133677/