Pass-Funktion in Requisiten Griddle benutzerdefinierte Komponente - ReactJS

Question

Ich habe den folgenden Code:

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.'} 
     /> 
    } 
}); 

Ich möchte die update() Funktion von RiderList in meinem RiderComponent laufen, wenn ich auf einen Eintrag klicken. Allerdings bekomme ich immer: 'Uncaught TypeError: this.props.metadata.update ist keine Funktion'.

Wie kann ich die Update-Funktion in meiner RiderComponent korrekt ausführen?

RiderList wird in Teammanager gemacht:

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; 

Hier this.getExternalData lädt nur die Daten in this.state.results.

EDIT: Ich habe etwas in OnRowClick = {this.update} in RiderList Rendern arbeiten. Dies wird jedoch ausgelöst, wenn ich auf die Zeile und nicht auf eine bestimmte Schaltfläche in der Zeile klicke.

Answer 1

aktualisiert Antwort basierend auf Frage neue Info,

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.'} 
    /> 
} 
});