Как сделать переключение табов?

Question

[tonybeat]

var Tabs = React.createClass({
        render :  function () {
            return (
               <div id="tb">
                   <ul>
                       <li><a href='#tabs-1'>Эконом</a></li>
                       <li><a href='#tabs-2'>VIP</a></li>
                       <li><a href='#tabs-3'>Минивен</a></li>
                   </ul>
                   <section className='tabs-content'>
                       <article id='tabs-1'>1</article>
                       <article id='tabs-2'>2</article>
                       <article id='tabs-3'>3</article>
                   </section>
               </div>
            );
        }
    });
    ReactDOM.render(
        <Tabs  />,
        document.getElementById('tabs_content')
    );

как сделать, чтоб табы переключались между собой...и отображался контент?

Answer 1

[tonybeat]

Вот код, но он не срабатывает. Ошибок не выдает, ДОМ такой :
joxi.ru/eAON5LoTXdQ52o

class Tabs extends React.Component {
        constructor() {
            super()
            this.state = {tabIndex: 0}
        }
        render() {
            return (
                <div id="tb">
                    <ul role="tablist">
                        <li  role="presentation" onClick={() => this.setState({tabIndex: 0})}></li>
                        <li  role="presentation" onClick={() => this.setState({tabIndex: 1})}></li>
                        <li  role="presentation" onClick={() => this.setState({tabIndex: 2})}></li>
                    </ul>

                    <section className='tabs-content'>
                        {() => this.state.tabIndex === 0 ? <article>1</article> : null}
                        {() => this.state.tabIndex === 0 ? <article>2</article> : null}
                        {() => this.state.tabIndex === 0 ? <article>3</article> : null}
                    </section>
                </div>
            );
        }
    }
    ReactDOM.render( <Tabs  />, document.getElementById('tabs_content'));

Comments

[Дмитрий Балашов]

Не силен в реакте, но очевидно, что в блоке с классом 'tabs-content' в каждой из функций нужно проверять tabIndex на равенство с соответствующим индексом, который навешивается на событии клика выше. То есть this.state.tabIndex === 0, this.state.tabIndex === 1, this.state.tabIndex === 2.

[abberati]

Дмитрий Балашов: всё верно. я случайно закопипастил этот кусок и забыл дописать. думал, будет очевидно.

[tonybeat]

abberati: Спасибо, работает от души!

[tonybeat]

abberati: не пойму, а как сделать, чтоб, табы существовали изначально, т.е. у нас пока я не переключу на второй таб его нет в ДОМ..а у меня в них генерируется html из json.
Т.е. первый таб у нас сейчас и открыт и в него html сгенировался, а во вторые табы нет

Answer 2

[abberati]

Это же реакт. Храните в Tabs.state указатель на открытый таб, в зависимости от него рендерите тот или иной <article/>. Никаких ссылок, никаких role, никаких tabindex.

var Tabs = React.createClass({
        constructor() {
          this.state = {tabIndex: 0}
        }
        render :  function () {
            return (
               <div id="tb">
                   <ul role="tablist">
                       <li  role="presentation" onClick={() => this.setState({tabIndex: 0})}></li>
                       <li  role="presentation" onClick={() => this.setState({tabIndex: 1})}></li>
                       <li  role="presentation" onClick={() => this.setState({tabIndex: 2})}></li>
                   </ul>
                   
                   <section className='tabs-content'>
                       {() => this.state.tabIndex === 0 ? <article>1</article> : null}
                       {() => this.state.tabIndex === 0 ? <article>2</article> : null}
                       {() => this.state.tabIndex === 0 ? <article>3</article> : null}
                   </section>
               </div>
            );
        }
    });
    ReactDOM.render(
        <Tabs  />,
        document.getElementById('tabs_content')
    );

Comments

[tonybeat]

Уважаемые, если не трудно покажите пример, не могу в инете инфу найти..
Очень надо, мамой клянусь

[abberati]

tonybeat: в ответе дописал

[tonybeat]

abberati: смотри написал снизу. там что то не понятно

[Aves]

tonybeat: там надо что-то типа

<section className='tabs-content'>
  {[<article>1</article>, <article>2</article>, <article>3</article>][this.state.tabIndex]}
</section>