प्रतिक्रिया: बच्चे घटक के अंदर एक फ़ंक्शन कॉल करें

Question

मैं इस के माध्यम से बाल घटक के अंदर एक फ़ंक्शन को कॉल करने का प्रयास कर रहा हूं लेकिन मुझे त्रुटि मिल रही है कि यह फ़ंक्शन मौजूद नहीं है।

Uncaught TypeError: this.refs.todayKpi.loadTodaysKpi is not a function 

जनक घटक:

class KpisHeader extends React.Component { 

    constructor() { 
    super(); 
    this.onUpdate = this.onUpdate.bind(this); 
    } 
    render(){ 
     return <div> 
      <DateRange ref="dateRange" onUpdate={this.onUpdate}/> 
      <TodayKpi ref="todayKpi" {...this.state}/> 
      </div>; 
    } 

    onUpdate(val){ 

     this.setState({ 
      startDate: val.startDate, 
      endDate: val.endDate 
     }, function(){ 
     this.refs.todayKpi.loadTodaysKpi(); 
     }); 
    } 
} 

मैं समारोह onUpdate के माध्यम से DATERANGE घटक से कुछ डेटा प्राप्त करना चाहते हैं, और फिर मैं TodayKpi अंदर एक समारोह जो सर्वर से डेटा को हासिल करेगा ट्रिगर करते हैं। अभी के लिए यह सिर्फ console.log है ("एएए");

बाल घटक:

class TodayKpi extends React.Component { 
    constructor() { 
     super(); 
     this.loadTodaysKpi = this.loadTodaysKpi.bind(this); 
    } 

    render(){ 
     console.log(this.props.startDate + " "+ this.props.endDate); 
     return <div className="today-kpi"> 


      </div>; 
    } 
    loadTodaysKpi(){ 
     console.log("AAAA"); 
    } 
} 

मैं यह कैसे लागू करना चाहिए?

Answer 1

यदि आप बच्चे के अंदर फ़ंक्शन/विधि कहलाते हैं, तो आपको इसे माता-पिता से शुरू करने के लिए बच्चे को पास करना चाहिए। दूसरी चीज जिसे आपको बदलने की जरूरत है onUpdate से onChange है, यह मानते हुए कि आप उस क्षेत्र में हर बदलाव को ट्रैक करना चाहते हैं। दूसरा विकल्प यह जांचना है कि यह onSubmit है, लेकिन ऐसा लगता है कि जब भी फ़ील्ड अपडेट हो जाती है तो ऐसा होता है।

Answer 2

कारणों से मुझे अभी तक समझ में नहीं आ रहा है, प्रतिक्रिया माता-पिता से बाल विधियों को कॉल करने से हतोत्साहित करती है। हालांकि, वे चिंतित हैं और हमें 'एस्केप हैच' देते हैं जो बस यही अनुमति देता है। आप यह सोचने में सही थे कि 'रेफ्स' उस भागने का हिस्सा था। यदि, मेरे जैसे, आपने इस जानकारी के लिए खोजे जाने वाले दर्जनों लेख पढ़े हैं, तो आप उनके description of the escape hatch

को समझने के लिए तैयार रहेंगे, आपके मामले में, आप अपने KpisHeader क्लास में ऐसा कुछ करने की कोशिश कर सकते हैं।

<TodayKpi ref={(todayKpiComponent) => this.todayKpiComponent = todayKpiComponent} {...this.state}/> 

या, पूर्व ES6, इस:

बदलें इस लाइन

<TodayKpi ref="todayKpi" {...this.state}/> 

इस तरह एक रेफरी कॉलबैक फ़ंक्शन कुछ का उपयोग करने के

<TodayKpi 
    ref= 
    { 
     function (todayKpiComponent) 
     { 
      this.todayKpiComponent = todayKpiComponent  
     } 
    } 
    {...this.state} 
/> 

तो फिर तुम हो जाएगा अपने KpisHeader क्लास से अपने आज केपीआई घटक विधियों तक पहुंचने में सक्षम:

this.todayKpiComponent.someMethod(); 

विचित्र रूप से, मेरे लिए, रेफ कॉलबैक फ़ंक्शन के अंदर, 'यह' मूल घटक की बजाय विंडो थी। इसलिए, मुझे

var self = this; 

प्रस्तुत विधि के ऊपर और रेफ कॉलबैक फ़ंक्शन के अंदर 'स्वयं' का उपयोग करना पड़ा।

मेरे मामले में मेरे पास गतिशील रूप से जेनरेट किए गए बच्चों के घटकों की अज्ञात संख्या थी, इसलिए मैंने प्रत्येक को एक सरणी में रखा। मैंने घटक WillUpdate में सरणी को मंजूरी दे दी। यह सब काम कर रहा है लेकिन मुझे एक असहज महसूस है, विशेष रूप से बच्चों के तरीकों को बुलाए जाने के लिए प्रतिक्रिया का विचलन दिया गया है।