Ant 设计 Tabs 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

您可以将其更改为受控组件以访问activeKeyonTabs组件。

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

演示