javascript - No call function of parent in Reactjs -
i have 2 function in reactjs. when function 1 call function of function two. there have error same
"uncaught typeerror: this.props.onbutonshowclick not function"
this function 1 :
var hiddenedit = react.createclass({ _handleonclick: function(e) { e.preventdefault(), this.props.onbutonshowclick(true); }, render: function() { return (<span classname="col-lg-2 btn-action-group"> <a classname="add btn-for-view" href={this.props.url_detail} id="btn-add-chapter-123" title="add"></a> <a classname="edit btn-for-view" onclick={this._handleonclick} id={this.props.id_chapter} title="edit"></a> <a classname="trash btn-for-delete btn-delete-episode" data-confirm="are sure?" rel="nofollow" data-method="delete" href=""></a> </span>); } });
and function 2
var chapterlist = react.createclass({ _handleonpaginate: function(pagenumber) { this.props.inpagenate(pagenumber) }, getinitialstate: function () { return { childvisible: false }; }, _handleonclick: function(params) { this.state.childvisible = params; }, render: function() { var showedit = this.state.childvisible; var chapternodes = this.props.data.chapters.map(function(chapter, index) { var url_chapter_detail = "/admin/chapters/" + chapter.chapter_id + "/chapter_details"; var btn_edit = "btn-edit-chapter-" + chapter.chapter_id; var href_delete = "/admin/mangas/" + chapter.manga_id + "/chapters/" + chapter.chapter_id; var div_chapter = "chapter-" + chapter.chapter_id; return (<div classname="row item-data" id={div_chapter}> <div classname="text-data-row"> <input value={chapter.chapter_id} type="hidden" classname="chapter[manga_id]" id="chapter_manga_id" /> <span classname="col-lg-1"> <input classname="form-control" disabled="disabled" type="text" value={chapter.chapter_order} name="chapter[chapter_order]" id="chapter_chapter_order" /> </span> <span classname="col-lg-5"> <input classname="form-control" disabled="disabled" type="text" value={chapter.chapter_name} name="chapter[chapter_name]" id="chapter_chapter_name" /> </span> <span classname="col-lg-2"> <input classname="form-control" disabled="disabled" type="text" value={chapter.by_group} name="chapter[by_group]" id="chapter_by_group" /> </span> { showedit ? <showedit url_detail={url_chapter_detail} id_chapter="btn_edit" /> : <hiddenedit onbutonshowclick={this._handleonclick} url_detail={url_chapter_detail} id_chapter="btn_edit" /> } </div> </div>); }); return (<div classname="form-post-movie" id="form-post-movie" role="form"> <div classname="col-lg-12"> <div classname="list-data"> {chapternodes} </div> </div> </div> <div classname="div-page"> <paginatorsection totalpages={this.props.data.meta.total_pages} currentpage={this.props.data.meta.current_page} onpaginate={this._handleonpaginate} /> </div> </div>); } });
can me solve this?
well, this undefined inside callback of array map. (array.prototype.map() docs)
and value passed onbuttonshowclick prop.
<hiddenedit onbutonshowclick={this._handleonclick} url_detail={url_chapter_detail} id_chapter="btn_edit" />
you should fix passing this second parameter of map:
var chapternodes = this.props.data.chapters.map(function(chapter, index) { /*...*/ }, this);
also, should take @ react's docs dynamic children.
Comments
Post a Comment