javascript - 如何防止在事件选项卡上调用函数？

Question

示例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

绘图:/image/ksiwq.jpg

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')
);

Answer 1

您可以添加一个条件来检查单击的选项卡是否已被选中，如果已选中，则不执行任何操作，否则正常运行

setActiveTab: function (selectedTabId) {
    if(!this.isActive(selectedTabId)){
     this.start();
     this.setState({ selectedTabId }); 
    }
  },

Demo