Reactjs中没有父级的调用函数

Question

I have two function in Reactjs. When function one call a function of function two. There have error same as

"Uncaught TypeError: this.props.onButonShowClick is not a function"

This is function one :

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 you sure?" rel="nofollow" data-method="delete" href=""></a>
        </span>);
    }
});

And this is a function two

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 anyone help me solve this?

Answer 1

Well, this is undefined inside the callback of an array map. ( Array.prototype.map() docs )

And so will be the value passed as onButtonShowClick prop.

<HiddenEdit onButonShowClick={this._handleOnClick} url_detail={url_chapter_detail} id_chapter="btn_edit" />

You should fix it by passing this as the second parameter of that map:

var chapterNodes = this.props.data.chapters.map(function(chapter, index) { /*...*/ }, this);

Also, you should take a look at React's docs about dynamic children.