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() 関数を実行したいと考えています。ただし、「Uncaught 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 render で 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 に答える