使标签切换有条件

时间:2017-12-07 22:25:24

标签: reactjs antd

我有一个基本的TAB界面,并想知道选项卡点击是否有办法检查条件。根据具体情况,我们会继续更换标签。

看看可用的方法,我找不到任何可以帮助我的方法。

onChange和onTabClick似乎不适合我想做什么,有什么想法吗?

谢谢!

2 个答案:

答案 0 :(得分:0)

无论您关注什么元素,都可以使用onKeyDown道具。然后,只需检查条件即可致电preventDefault()

onKeyDown = (event) => {
  if (condition) event.preventDefault()
}

答案 1 :(得分:0)

我不知道您的版本是否可行,但是您可以这样做: (例如,我没有设置任何逻辑,但是您可以在按钮中进行任何操作)

class App extends React.Component {
  state = {
    activeKey: "1"
  };

  handleChange = activeKey => {
    this.setState({ activeKey });
  };

  render() {
    return (
      <div className="App">
        <p>Current antd version: {version}</p>
        <div>
          <Tabs
            type="primary"
            onChange={this.handleChange}
            activeKey={this.state.activeKey}
          >
            <TabPane tab="First" key="1">
              <Button
                onClick={() => {
                  this.setState({ activeKey: "2" });
                }}
              >
                Go to Second Tab
              </Button>
            </TabPane>
            <TabPane tab="Second" key="2">
              <Button
                onClick={() => {
                  this.setState({ activeKey: "1" });
                }}
              >
                Back to first tab
              </Button>
            </TabPane>
          </Tabs>
        </div>
      </div>
    );
  }
}

Edit broken-sound-5897p