Как в React.js создать ссылку для смены активной вкладки с помощью react-bootstrap?

Я использую вкладки React-bootstrap и хочу создать ссылку на своей вкладке контент, который меняет активную вкладку и открывает вторую вкладку.

Например:

<Tabs ...>
   <Tab eventKey={1} ...>
      Click this <TabLink eventKey={2} ...>link</TabLink>
   </Tab>
   <Tab eventKey={2} ...>
      <TabLink eventKey={2} ...>
         ...
      </TabLink>
   </Tab>
</Tabs>

Очевидно, что TabLink не существует как компонент - и это мой вопрос, как мне это сделать?


reactjs javascript react-router twitter-bootstrap react-bootstrap
person Adrian Carolli    schedule 22.09.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Компонент Tabs имеет свойство activeKey — используйте состояние вашего компонента для управления этим значением (как показано в этом примере), а затем используйте тег a с onClick для своей ссылки.

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

const LinkedTabs = React.createClass({
  getInitialState() {
    return {
      key: 1
    };
  },

  goToTab(key) {
    this.setState({key});
  },

  render() {
    return (
      <Tabs activeKey={this.state.key}>
        <Tab eventKey={1} title="Tab 1">
          <span>Click this </span><a onClick={() => this.goToTab(2)}>link</a>
        </Tab>
        <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
        <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
      </Tabs>
    );
  }
});
person Joe Clay    schedule 22.09.2016