1

我有以下代码：

var RiderComponent = React.createClass({
    updater: function(){
        this.props.metadata.update();
    },

    render: function () {
        return (
            <a href="#" onClick={this.updater}>
                click!
            </a>
        );
    }
});

var RiderList = React.createClass({
    columnMeta: [
        {
            "columnName": "action",
            "displayName": "",
            "cssClassName": "buy",
            "order": 6,
            "customComponent": RiderComponent,
            "update": this.update
        }
    ],

    update: function () {
        this.props.update();
    },

    render: function () {
        return <Griddle results={this.props.data}
                        useGriddleStyles={false}
                        showFilter={true}
                        columnMetadata={this.columnMeta}
                        columns={['action']}
                        resultsPerPage={18}
                        initialSort={'value'}
                        initialSortAscending={false}
                        noDataMessage={'Geen wielrenners gevonden.'}
        />
    }
});

当我单击一个项目时，我想从我的 RiderComponent 中的 RiderList 运行 update() 函数。但是我不断收到：'未捕获的 TypeError：this.props.metadata.update 不是函数'。

在我的 RiderComponent 中执行更新功能的正确方法是什么？

RiderList 在 TeamManager 中呈现：

var TeamManager = React.createClass({
    getInitialState: function () {
        return {
            results: [],
            activeRiders: [],
            extraRiders: [],
            availablePositions: []
        }
    },

    componentWillMount: function () {
        this.getExternalData();
    },

    getExternalData: function () {
        var race_id = 1; // TODO: this is hardcoded
        request = Api.getRidersPageUrl(race_id);

        $.get(request, function (rsp) {
            var data = rsp;
            var activeRiders = []; // Riders with position 0..8
            var extraRiders = []; // Riders with position 9..14
            var availablePositions = Array.apply(null, {length: 9}).map(Number.call, Number); // Array 0..8;

            if (data) {
// set data to arrays here
            }

            this.setState({
                results: data,
                activeRiders: activeRiders,
                extraRiders: extraRiders,
                availablePositions: availablePositions
            });
        }.bind(this));
    },

    render: function () {
        return (
            <RiderList update={this.getExternalData} data={this.state.results}/>
        )
    }
});

module.exports = TeamManager;

这里 this.getExternalData 只是重新加载 this.state.results 中的数据。

编辑：在 RiderList 渲染中使用 onRowClick={this.update} 时我得到了一些工作。但是，当我单击行而不是行中的特定按钮时会触发。

4

1 回答 1

-1

根据问题新信息更新答案，

var RiderComponent = React.createClass({
    render: function () {
        return (
            <a onClick={this.props.metadata.update}>
                click!
            </a>
        );
    }
});

var RiderList = React.createClass({
    getColumnMeta: function(){
        return[
            {
                "columnName": "action",
                "displayName": "",
                "cssClassName": "buy",
                "order": 6,
                "customComponent": RiderComponent,
                "update": this.update
            }
        ]
    },

update: function () {
    this.props.update();
},

render: function () {
    return <Griddle results={this.props.data}
                    useGriddleStyles={false}
                    showFilter={true}
                    columnMetadata={this.getColumnMeta()}
                    columns={['action']}
                    resultsPerPage={18}
                    initialSort={'value'}
                    initialSortAscending={false}
                    noDataMessage={'Geen wielrenners gevonden.'}
    />
}
});
于 2016-05-03T09:06:56.303 回答