React: Przekaż funkcję komponentowi potomnemu

Question

Próbuję przekazać funkcję do mojego komponentu potomnego. Dla każdego komponentu podrzędnego, gdy użytkownik je kliknie, zostanie wywołana funkcja onclick. Ta funkcja onclick jest zapisywana w komponencie nadrzędnym. Komponent

nadrzędny:

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> 
    ); 
    } 
} 

komponent dziecka:

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

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

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

Na tej linii: <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />

To znaczy, że nie jest zdefiniowana handleClick ... Jak mogę sovle ten problem ?

Dziękujemy za odpowiedź.

Answer 1

Trzeba związać Agentów do AgentsList: Oto krótki przykład z kodem, musiałem pozbyć się niektórych rzeczy, ale masz pomysł:

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