Ant 设计 Tabs onClick 功能 [英] Ant design Tabs onClick function

问题描述

我使用 Ant 设计创建了选项卡.在第二个选项卡中有一个按钮，当我单击要触发或更改为第一个选项卡的按钮时

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

这里是我的代码

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

你能帮我吗?

推荐答案

您可以将其更改为受控组件以访问 Tabs 组件上的 activeKey.

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

演示

这篇关于Ant 设计 Tabs onClick 功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！