Reagire: passare la funzione al componente figlio

Question

Si tenta di passare una funzione al componente figlio. Per ogni componente figlio quando l'utente fa clic su di essi, la funzione onclick sarà chiamata. Questa funzione onclick è scritta nel componente principale. componente

principale:

class AgentsList extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    handleClick(e) { 
    e.preventDefault(); 
    console.log(this.props); 
    } 

    render() { 
    const { agents } = this.props; 

    ... 

    var agentsNodes = agents.map(function(agent, i) { 
     if(agent.id_intervention == "") { 
     return (
      <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} /> 
     ); 
     } 
    }); 
    return (
     <div id="agents"> 
     <div className="agents-title"> 
      <h3>Title</h3> 
     </div> 
     {agentsNodes} 
     </div> 
    ); 
    } 
} 

componente figlio:

class Agent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { agent, t } = this.props; 

    return (
     <Link to='/' onClick={this.props.onClick}> 
     ... 
     </Link> 
    ); 
    } 
} 

In questa linea: <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />

E dire che handleClick non è definita ... Come posso sovle questo problema ?

Grazie per la risposta.

Answer 1

hai bisogno di impegnare Agents a AgentsList: Ecco un rapido esempio con il codice, ho dovuto sbarazzarsi di alcune cose, ma si ottiene l'idea:

http://jsfiddle.net/vhuumox0/19/

var agentsNodes = agents.map(function(agent, i) { 
    if(agent.id_intervention == "") { 
    return (
     <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} /> 
    ); 
    } 
}, this); // here