Дизайн муравьев Вкладки функции onClick

Я создал вкладки с помощью дизайна 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>

Вы можете мне помочь?


reactjs antd
person jayanes    schedule 17.12.2018    source источник

Ответы (1)


arrow_upward
13
arrow_downward

Вы можете изменить его на управляемый компонент, чтобы получить доступ к компоненту activeKey на 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>
    );
  }
}

Демо

person Agney    schedule 17.12.2018
comment
Большое спасибо - person jayanes; 17.12.2018