प्रतिक्रिया: बाल घटक

Question

पर फ़ंक्शन फ़ंक्शन मैं अपने बच्चे के घटक को फ़ंक्शन पास करने का प्रयास करता हूं। प्रत्येक बच्चे घटक के लिए जब उपयोगकर्ता उन पर क्लिक करता है, तो ऑनक्लिक फ़ंक्शन कॉल किया जाएगा। यह ऑनक्लिक फ़ंक्शन पैरेंट घटक में लिखा गया है।

जनक घटक:

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