reactjs - React.js How can have an onClick function apply to all component divs -
i have handleclick function console.logs initindex state. want work on secondcomponent div too. @ moment, though have handleclick function in secondcomponent not fire event.
ideally don't want repeat handleclick function again in secondcomponent. missing?
i still quite new react , it's baffling me.
var playappcomponent = react.createclass({ getinitialstate : function(){ return { initindex : true }; }, handleclick: function() { console.log("is "+ this.state.initindex) }, render: function(){ return ( <div> <h2 classname="visible" onclick={this.handleclick}>true</h2> <secondcomponent /> </div> ); } }); var secondcomponent = react.createclass({ getinitialstate : function(){ return { initindex : true }; }, render: function(){ return ( <div> <h2 classname="visible" onclick={this.handleclick}>true</h2> </div> ); } }); reactdom.render( <playappcomponent />, document.getelementbyid('app') );
any appreciated. moe
pass handle function attribute second component , call function on onclick handler below
var playappcomponent = react.createclass({ getinitialstate : function(){ return { initindex : true }; }, handleclick: function() { console.log("is "+ this.state.initindex) }, render: function(){ return ( <div> <h2 classname="visible" onclick={this.handleclick}>true</h2> <secondcomponent handleclick={this.handleclick}/> </div> )}; } }); var secondcomponent = react.createclass({ getinitialstate : function(){ return { initindex : true }; }, handleclick: function() { this.props.handleclick(); }, render: function(){ return ( <div> <h2 classname="visible" onclick={this.handleclick}>true</h2> </div> ); } }); reactdom.render( <playappcomponent />, document.getelementbyid('app') );
Comments
Post a Comment