React: передать функцию дочернему компоненту

Question

Я пытаюсь передать функцию моему дочернему компоненту. Для каждого дочернего компонента, когда пользователь нажимает на них, функция onclick будет вызывать. Эта функция onclick записывается в родительский компонент.

Родитель компонент:

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

Детский компонент:

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

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

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

На этой линии: <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />

Следует сказать, что handleClick не определен ... Как я могу sovle эту проблему ?

Спасибо за ваш ответ.

Answer 1

Вы должны связать агент для AgentsList: Вот быстрый пример с кодом, я должен был избавиться от некоторых вещей, но вы получите идею:

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