Kommunikation zwischen Eltern und Kind mit Zeile ReactJs

Question

Ich versuche, eine Elternfunktion aus einer untergeordneten Funktion aufzurufen.

Ich folge diesem Beispiel: Expose Component Functions aber mit diesem Code wird meine Seite nicht geladen und meine Konsole ist leer, so dass ich nicht weiß, das Problem zu finden.

Ich benutze webpack mit babel und webpack-dev-Server

Vielen Dank für Ihre Antworten.

Es tut mir leid für mein Englisch.

class Row extends React.Component { 
    render(){ 
     return(
     <tr className="animated slideInRight"> 
     <th scope="row">{this.props.data.ville_id}</th> 
     <td>{this.props.data.ville_nom}</td> 
     <td>{this.props.data.ville_nom_reel}</td> 
     <td>{this.props.data.ville_canton}</td> 
     <td><button className="btn btn-success" onClick={this.props.onClick} >Full Detail</button></td> 
     </tr> 
    ) 
    } 
} 

export default class Metier extends React.Component { 

    constructor() { 
    super(); 

    this.state = { 
     data: [], 
    }; 
    } 
    deleteClick(e){ 
     console.log("ici") 
    } 

    render(){ 
    return(
      <table className="table table-striped"> 
        <thead> 
        <tr> 
        <th>IdVille</th> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Username</th> 
        <th>Action</th> 
        </tr> 
        </thead> 
        <tbody> 
         {this.state.data.map(function(result,i){ 
         var boundClick = this.deleteClick.bind(this,i) 
         return(
          <Row onClick={boundClick} key={i} data={result} /> 
         ) 
         })} 
        </tbody> 
        </table> 
) 
    } 
} 

Answer 1

Sie haben die Pfeil-Funktion in der Karte verwenden, damit Sie this zugreifen:

{this.state.data.map((result,i) => { 
    var boundClick = this.deleteClick.bind(this,i) 
    return(
     <Row onClick={boundClick} key={i} data={result} /> 
    ) 
})} 

Durch die Verwendung einer einfachen Funktion können Sie einen neuen Kontext schaffen und in dieser Funktion können Sie nicht this.deleteClick zugreifen. Mit einer Pfeilfunktion können Sie immer noch darauf zugreifen.