Ant design Tabs onClick function

Question

I created tabs using Ant design .In second tab there is a button when i click the button i want to trigger or changed to first tab

here my code

 <Tabs onChange={this.tabClick} defaultActiveKey="1">
          <TabPane tab={<span><Icon type="user-add" />Create Role</span>} key="1">   <FormItem
                              {...formItemLayout}
                              label="Role Name"
                              hasFeedback

                          >
                              {getFieldDecorator('roleName', {
                                  rules: [{}, {
                                      required: true, message: 'Please input Role name !',
                                  }],
                              })(
                                  <Input
                                      placeholder="Role Name"/>
                              )}
                          </FormItem> //other fields </TabPane>


 <TabPane tab={<span><Icon type="user-add" />view Role</span>}> 


 <Button    onClick={this.doneButton} style={{marginLeft:150}} type="primary">Done</Button>

</TabPane>

Can you help me?

Answer 1

You can change it to a controlled component to access the activeKey on Tabs component.

class App extends React.Component {
  state = {
    activeTab: "1"
  };
  changeTab = activeKey => {
    console.log(activeKey);
    this.setState({
      activeTab: activeKey
    });
  };
  render() {
    return (
      <Tabs activeKey={this.state.activeTab} onChange={this.changeTab}>
        <TabPane tab="Tab 1" key="1">
          Content of Tab Pane 1
        </TabPane>
        <TabPane tab="Tab 2" key="2">
          <Button onClick={() => this.changeTab("1")}>Done</Button>
        </TabPane>
      </Tabs>
    );
  }
}

Demo