reactjs - update brothers objects from react -
i'm learning react , want implement basic nav side bar has items, want make last 1 clicked have classname active , others not.
in following code cannot remove classname in resetall item.setstate (yeah read doc understand doesn't work), tried manipulate dom directly using jquery. works on first click second click has no effect. there react native way this? thanks.
$(document).ready(function(){ var navitem = react.createclass({ getinitialstate: function() { return this.props.item; }, handleclick: function() { react.render(<span>{this.props.item.description}</span>, document.getelementbyid('main')); this.props.resetall(); console.log("this", this); this.setstate({active: true}); }, render: function() { var classname = this.state.active ? "active" : ""; return <li classname={classname}><a href="#" onclick={this.handleclick}>{this.props.item.description}</a></li>; } }); var navbar = react.createclass({ items : [], resetall: function() { this.items.foreach(function(item) { console.log("item", item); // item.setstate({active: false}); }); $("#nav-sidebar li").each(function(){ $(this).removeclass("active"); }); }, render: function() { var _this = this; this.props.items.foreach(function(item) { console.log("handleclick", this.handleclick); _this.items.push(<navitem item={item} key={item.id} resetall={_this.resetall}/>); }); return ( <ul classname="nav nav-sidebar" id="nav-sidebar"> {this.items} </ul> ); } }); var navlist = [ {id: 1, description: 'overview', active: true}, {id: 2, description: 'calls'}, {id: 3, description: 'channels'}, {id: 4, description: 'overview'} ] react.render(<navbar items = {navlist} />, document.getelementbyid('sidebar')); react.render( <h1>hello, freeswitch!</h1>, document.getelementbyid('main') ); });
when navitem calls this.props.resetall(), function isn't bound navbar, can't iterate through navbar's items. bind correct scope this:
<navitem item={item} key={item.id} resetall={_this.resetall.bind(this)}/>