senden Daten über onclick Ereignis von Kind zu Eltern Reagieren js?

Ich bin neu zu Reagieren js Ich bin ziemlich verwirrt, dass, wie man Daten durch onclick Ereignis vom Kind zur Elternteilkomponente sendet.senden Daten über onclick Ereignis von Kind zu Eltern Reagieren js?

geordnete Komponente

... 
     onTurn(id){ 
      console.log(id)//undefined 
     } 
     renderCardsList(){ 
       const {cardsList} = this.props 

       return cardsList.get('cards').map(({id,front_image}) => { 
        return <Card 
          image={front_image} 
          onTurn={this.onTurn} 
          /> 
       }) 

      } 
...

Kinder Komponente

const Card = (props) => { 
    return(
     <div className="singleCard"> 
      <div className="imageDiv"> 
       <img src={props.image} alt="work" /> 
      </div> 
      <div className="bottombar"> 
       <span onClick={e => props.onTurn(props.id)} className="glyphicon glyphicon-refresh" /> 
       <span className="glyphicon glyphicon-pencil" /> 
       <span className="glyphicon glyphicon-pushpin" /> 
      </div> 
     </div> 
    ) 
};

Quelle

2017-07-13 Nane

Was speziell Sie ist verwirrend? Was läuft falsch, wenn Sie das versuchen? (Sie können bessere Antworten erhalten, wenn Sie ein ** runnable ** [mcve] einbinden, das das Problem mithilfe von Stack Snippets (der '[<>]' Symbolleistenschaltfläche) demonstriert. Stack Snippets unterstützen React, einschließlich JSX; [hier geht's zur Vorgehensweise ] (http://meta.stackoverflow.com/questions/338537/)). –

Randnotiz: Es gibt keine Notwendigkeit (und keinen Punkt), 'this' als zweites Argument zu' map' zu übergeben, wenn Sie eine Pfeilfunktion für den Callback verwenden; 'this' wird von der Pfeilfunktion übernommen, und die' map', die beim Aufruf verwendet wird, wird ignoriert. –

Ich erhalte Undefiniert – Nane

Ihre onClick erwartet eine id Eigenschaft auf props:

onClick={e => props.onTurn(props.id)}

Aber Sie bieten nicht ein:

return <Card 
    image={front_image} 
    onTurn={this.onTurn} 
    />

So natürlich, props.id in der Karte des render ist undefined.

Wenn Sie die Karte wünschen eine id auf props haben, werden Sie eine angeben müssen, z.B .:

return <Card 
    image={front_image} 
    onTurn={this.onTurn} 
    id={/*something*/} 
    />

Quelle

2017-07-13 13:29:17

Solch ein dummer Fehler – Nane

senden Daten über onclick Ereignis von Kind zu Eltern Reagieren js?

Antwort

Verwandte Themen