CODEWITHSUNDEEP
reactjsantd
Pablo Rincon
Pablo Rincon

Reputation: 1039

Make tab switching conditional

I have a basic TAB interface and was wondering if there is a way upon tab click, to check a condition. Depending on the condition we go ahead with the tab change or not.

Looking at the methods available, i could not find anything that would help me.

onChange and onTabClick do not seem to work for what im trying to do, any ideas ?

Thanks!

Upvotes: 4

Views: 3414

Answers (2)

Filipe
Filipe

Reputation: 170

I don't know if is possible in your version but u can do it like this: (In the exemple i don't set up any logic but you can do what ever you want in the button)

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

Upvotes: 2

cfraser
cfraser

Reputation: 961

Whatever element you have focus on, you can use the onKeyDown prop. Then, just check the condition to call preventDefault()

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

Upvotes: 0

Related Questions