2016-12-21 16 views
1

Ich habe eine Komponente, die wie folgt aussieht:Kann ich onClickevents einstellen, die noch nicht definiert sind?

const ProductCarousel = React.createClass({ 
    componentDidMount: function() { 
    this.flky = new Flickity('.carousel', flickityOptions) 
    //here 
    }, 
    render: function() { 
    const item = this.props.item 
    return (
     <div> 
     <div className='carousel'> 
      {item.get('images').map((url, i) => (
      <img key={i.toString()} src={stripUrl(url)} width={520} /> 
     ))} 
     </div> 
     <div style={{marginTop: '20px', display: 'flex'}}> 
      {item.get('images').map((url, index) => 
      <div style={{flexGrow: 1, margin: '0 1em 0 1em'}} className='hidden-xs' key={url}> 
       <Thumbnail src={stripUrl(url)} /> 
      </div> 
     )} 
     </div> 
     </div> 
    ) 
    } 
}) 

der Ort, wo es heißt „hier“, ich möchte funcitons für <Thumbnail onClick /> definieren. Diese Funktionen sind Methoden für this.flky, so dass ich sie nicht vor componentDidMount erstellen kann, aber ich möchte sie in der Miniaturansicht festlegen und den Miniaturindex an sie übergeben. Gibt es etwas wie ein Versprechen, das ich verwenden könnte?

Antwort

0

Wenn Sie es in einer Funktion setzen, wird es nicht ausgeführt werden sollen, bis sie angeklickt wird, und die Methoden sollten dann existieren:

<Thumbnail src={stripUrl(url)} onClick={()=>this.flky.someMethod(index)} /> 
+0

Cool, muss ich so die Methode inline setzen oder könnte ich eine externe Referenz erstellen? – Himmators

+0

Sie sollten in der Lage sein, es extern zu machen, solange die Onclick-Funktion existiert, wenn es gerendert wird. – Scimonster

Verwandte Themen