reactjs - react - expose component function -
how access in react, method of 1 component in other components, not in direct parent-child relation? example:
var questionsbox = react.createclass({ **editquestion**: function(questionid){ // // this.refs.mainform.loadquestionfromserver.bind(this, questionid); }, getinitialstate: function() { return {data: []}; }, render: function() { return ( <div classname="questionsbox"> <h4>questions</h4> <questionslist data={this.state.data}/> </div> ); } }); var questionslist = react.createclass({ render: function() { var reactobject = this; var questionslist = this.props.data.map(function (question) { return ( <question id={question.id}> {question.question_name} </question> ); }); return ( <div> {questionslist} </div> ); } }); var question = react.createclass({ render: function() { return( <div classname="question"> {this.props.children} <a onclick={**access here editquestion method of questionsbox component, parameters**}>edit</a> </div> ); } });
or other similar structures, do not have direct parent-child relation..
you need pass down prop
var questionsbox = react.createclass({ **editquestion**: function(questionid){ // // this.refs.mainform.loadquestionfromserver.bind(this, questionid); }, getinitialstate: function() { return {data: []}; }, render: function() { return ( <div classname="questionsbox"> <h4>questions</h4> <questionslist data={this.state.data} editquestion={this.editquestion} /> </div> ); } }); var questionslist = react.createclass({ render: function() { var reactobject = this; var questionslist = this.props.data.map(function (question) { return ( <question> id={question.id} editquestion={this.props.editquestion} {question.question_name} </question> ); }); return ( <div> {questionslist} </div> ); } }); var question = react.createclass({ render: function() { return( <div classname="question"> {this.props.children} <a id={this.props.id} onclick={this.editquestion}>edit</a> </div> ); }, editquestion: function(e) { this.props.editquestion(e.target.id); } });
Comments
Post a Comment