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

하위 구성 요소 : <Agent agent={agent} key={i} ticket={t} id={row_names} onClick={this.handleClick.bind(this)} />

그것은 handleClick가 정의되지 않은 말 ... 가 어떻게이 문제를 sovle 수 있습니다 :이 라인에서

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

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

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

?

답변 해 주셔서 감사합니다. 나는 몇 가지 물건을 제거했다 는 다음 코드와 간단한 예입니다,하지만 당신은 아이디어를 얻을 :

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