javascript - Modify state data for non-child react component -
i have 2 , independent react classes
var user = react.createclass({ .... updategamescore: function(){ this.game1.score = .... } render: function(){ return ( <div>{this.state.totalscore}</div>); }); var game = react.createclass({ .... updateuserscore:function(){ how access/modify parent here??? }, render: function(){ return ( <div>{this.state.score}</div>); });
i need able update user totalscore when game score changes , vice versa based on formula (irrelevant here). components such game nested in user child component cannot vice versa. change in user score can update game score passing down variable using this.state(..)
, when game score changes, way can use update correct parent user score (there can more 1 users @ time)
you can pass handler function user game via props:
var user = react.createclass({ ... handlescorechange: function(newscore) { this.setstate({totalscore: newscore}); } render: function () { return ( <game handlescorechange={this.handlescorechange.bind(this)} /> ) } }); var game = react.createclass({ ... updateuserscore: function() { this.props.handlescorechange(this.state.score); } }
Comments
Post a Comment