Муравьиные вкладки с функцией onClick

Question

Я создал вкладки, используя дизайн Ant. Во второй вкладке есть кнопка, когда я нажимаю кнопку, которую я хочу вызвать, или меняю на первую вкладку

здесь мой код

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

Можетты мне помогаешь?

Answer 1

Вы можете изменить его на контролируемый компонент для доступа к компоненту activeKey on Tabs.

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

Демо