So I have a tab-component
that has 3 items:
React.DOM.ul( className: 'nav navbar-nav',
MenuItem( uid: 'home')
MenuItem( uid: 'about')
MenuItem( uid: 'contact)
)
And in the .render
of MenuItem
:
React.DOM.li( id : @props.uid, className: @activeClass, onClick: @handleClick,
React.DOM.a( href: "#"+@props.uid, @props.uid)
)
Every time I click an item, a backbone router gets called, which will then call the tab-component
, which in turn will call a page-component
.
I'm still trying to wrap my head around the fact there's basically a one-way data-flow. And I'm so used to manipulating the DOM directly.
What I want to do, is add the .active
class to the tab clicked, and make sure it gets removed from the inactive ones.
I know the CSS trick where you can use a data-
attribute and apply different styling to the attribute that is true
or false
.
The backbone router already has already gotten the variable uid
and calls the right page. I'm just not sure how to best toggle the classes between tabs, because only one can be active at the same time.
Now I could keep some record of which tab is and was selected, and toggle them etc. But React.js already has this record-keeping functionality.
The @handleClick
you see, I don't even want to use, because the router should tell the tab-component
which one to give the className: '.active'
And I want to avoid jQuery, because React.js doesn't need direct DOM manipulation.
I've tried some things with @state but I know for sure there is a really elegant way to achieve this fairly simple, I think I watched some presentation or video of someone doing it.
I'm really have to get used to and change my mindset towards thinking React-ively.
Just looking for a best practice way, I could solve it in a really ugly and bulky way, but I like React.js because it's so simple.
See Question&Answers more detail:
os