Reactjs中没有父级的调用函数

Question

我在 Reactjs 中有两个函数。 当函数一调用函数二的函数时。 有相同的错误

“未捕获的类型错误：this.props.onButonShowClick 不是函数”

这是功能一：

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>);
    }
});

这是一个函数二

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>);
}
});

谁能帮我解决这个问题？

Answer 1

好吧，这在数组映射的回调中是未定义的。 （ Array.prototype.map() 文档）

作为 onButtonShowClick 道具传递的值也是如此。

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

您应该通过将其作为该地图的第二个参数传递来修复它：

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

此外，您应该查看 React 的关于动态子项的文档。