Ausführen einer State-Methode aus der zustandslosen Komponente

Question

Ich habe eine Seitenkomponente sagen wir HomePage. Und ich habe zwei zustandslose Komponenten namens List und ListRow. Die Idee besteht darin, die Tabelle mit der Liste der Elemente anzuzeigen, und wenn der Benutzer auf eine bestimmte Zeile klickt, die Tabelle ausblenden und die Details dieser bestimmten Zeile anzeigen.

Also in meiner HomePage Render-Methode:

<List data={listOfData} onClick={this.clickHanlder} /> 

Die HomePage Click-Handler-Methode:

clickHandler(name) { 
    console.log(name); 
} 

Und in meiner List staatenlos Komponente ich dies tun:

const List = ({data, onClick}) => { 
    return (
    <table> 
     <thead> 
     <tr> 
      <td>Name</td> 
     </tr> 
     </thead> 
     <tbody> 
     {data.map(el => 
      <ListRow key={el.id} item={el} onClick={onClick} /> 
     )} 
     </tbody> 
    </table> 
); 
} 

Und in mein ListRow stat eless Komponente ich dies tun:

const ListRow = ({item, onClick}) => { 
    return (
    <tr> 
     <td><a href="#" onClick={onClick(el.name)}>{el.name}</a></td> 
    </tr> 
); 
} 

Die Click-Handler-Methode in den HomePage ausführt, sobald die Seite geladen wird, ohne auch nur auf der Zeile klicken. Wenn ich auf die Zeile klicke, passiert nichts.

Ich bin fest, wie und wo das Click-Ereignis zu behandeln, so dass ich die Tabelle ausblenden und die Details der Zeile anzeigen. Ich sollte auch Close/Back-Taste implementieren, um die Tabelle anzuzeigen und die Details zu verbergen.

Was ich bis jetzt getan habe, ist die Implementierung der Click-Event-Methode in HomePage, die ihren Zustand aktualisieren und diese Methode bis zur ListRow zustandslosen Komponente übergeben wird. Aber wenn ich die App selbst lade, wird das click-Ereignis ausgeführt. Ich bin mir nicht sicher, wie ich damit richtig umgehen soll.

Answer 1

ich die Lösung fand schließlich. Ich habe es falsch gemacht. Ich habe die clickHandler geändert wie folgt:

clickHandler(event) { 
    console.log(event.target.innerHTML); 
} 

und in meiner ListRow staatenlos Komponente, ich tue dies:

const ListRow = ({item, onClick}) => { 
    return (
    <tr> 
     <td><a href="#" onClick={onClick}>{el.name}</a></td> 
    </tr> 
); 
} 

Der Fehler, den ich tat, ist, dass ich versuchte, die passieren Wert für das onClick-Ereignis, das scheinbar nicht funktioniert.Die Verwendung von innerHTML löste das Problem.

Answer 2

Es ist idiomatisch in Container-Komponenten implementieren reagieren, die (zum Beispiel) behandelt klicken Ereignisse, Bevölkerung etc. Also in Ihrem Fall, dass Sie einen Handler für die Zeile/Element klicken in der Komponente Liste und einen Verweis übergibt erstellen dazu ListRow Komponente als eine seiner Requisiten.

Auch wenn es zustandslos ist, kann Ihre Liste Komponente noch eine Funktion deklarieren, um den Klick zu behandeln; Blick auf das Beispiel am Anfang dieses Artikels gezeigt:

https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.9sxosb40u

aber Sie keine der Lifecycle-Methoden oder Zustand reagieren können. Wenn Sie diese verwenden möchten, müssten Sie es wickeln, wie hier gezeigt:

https://egghead.io/lessons/javascript-redux-fetching-data-on-route-change