React.js - अपरिभाषित

Question

की संपत्ति नहीं पढ़ सकता है मैं बहुत सरल प्रतिक्रिया ऐप बना रहा हूं। फिर भी जब मैं ऑन चेंज इवेंट के माध्यम से अभिभावक (वास्तव में दादा) घटक की विधि का आह्वान करने का प्रयास करता हूं, तो मुझे Uncaught TypeError: Cannot read property 'props' of undefined मिल रहा है।

यहां घटक/रूप है जो घटना को ट्रिगर कर रहा है (इस प्रकार बाध्य पैरेंट घटक पर विधि का आह्वान कर रहा है ... हां मैंने विधि पर (बाउंड) विधि का उपयोग किया क्योंकि मैंने इसे प्रोप के माध्यम से मूल घटक से पास कर दिया था।)।

class MonthsTable extends Component { 
    handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value); // here the method is not found, causing error. 
    } 
    render(){ 
    console.log(this.props.setMonth) // here the method is present alright 
    return (<form> 
     {this.props.months.map((e, i) => 
     <input 
      type='number' 
      id={i} 
      key={i} // yes I know, bad habit, but in this case it doesn't matter 
      value={this.props.months[i]} 
      onChange={this.handleChangeOnMonth} />)} 
    </form>) 
    } 
} 

यहाँ कैसे मैं सबसे माता पिता (दादा-दादी) घटक से रंगमंच की सामग्री के रूप में विधि पार जाते हैं।

<Months setMonth={this.setMonth.bind(this)} /> 

यहाँ कैसे मैं (घटक विधि मालिक और विधि invoker के बीच यह है कि)

<MonthsTable setMonth={this.props.setMonth} /> 

और अंत में घटक (MonthsTable) है कि आप पहले देखा था के लिए पारित किया माता-पिता में रंगमंच की सामग्री के रूप में विधि पारित है । व्हील यह प्रासंगिक है या नहीं, अंतिम (अधिकांश बच्चे) घटक प्रदर्शित होते हैं यदि कथन के आधार पर जो ठीक काम करता है (किसी भी तरह प्रासंगिक हो सकता है, मुझे नहीं पता)।

प्रश्न है ... (setMonth) विधि (handleChangeOnMonth) विधि के अंदर 'अदृश्य' क्यों है।

किसी भी सलाह के लिए धन्यवाद।

Answer 1

वास्तविक समस्या यह है कि this संदर्भ आपके handleChangeOnMonth फ़ंक्शन में परिभाषित नहीं है। ऐसा इसलिए होता है क्योंकि जावास्क्रिप्ट फ़ंक्शंस के संदर्भों को संभालता है, मूल रूप से जब आप उन्हें ऑब्जेक्ट से सीधे कॉल नहीं कर रहे हैं, और वे बाध्य नहीं हैं, तो उनके पास परिभाषित संदर्भ नहीं होगा, और जब से आप फ़ंक्शन पास कर रहे हैं इनपुट घटक के पैरामीटर के रूप में, यह संदर्भ खो देता है।

इसे ठीक करने का सबसे सरल तरीका, समारोह बाध्य करने के लिए है मेरा सुझाव है कि आप निर्माता में समारोह के लिए बाध्य है, तो जैसे:

class MonthsTable extends Component { 
    constructor(props, context){ 
    super(props, context); 
    this.handleChangeOnMonth = this.handleChangeOnMonth.bind(this); 
    } 
    handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value); 
    } 
    render(){ 
    return (<form> 
     {this.props.months.map((e, i) => 
     <input 
      type='number' 
      id={i} 
      key={i} 
      value={this.props.months[i]} 
      onChange={this.handleChangeOnMonth} />)} 
    </form>) 
    } 
} 

वैकल्पिक रूप से, अगर आप सज्जाकार उपयोग कर रहे हैं आप के लिए core-decorators पैकेज इस्तेमाल कर सकते हैं इसे एक और अधिक सुरुचिपूर्ण तरीके से करें:

import {autobind} from "core-decorators" 

@autobind 
class MonthsTable extends Component {  
    handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value); 
    } 
    render(){ 
    return (<form> 
     {this.props.months.map((e, i) => 
     <input 
      type='number' 
      id={i} 
      key={i} 
      value={this.props.months[i]} 
      onChange={this.handleChangeOnMonth} />)} 
    </form>) 
    } 
} 

Answer 2

आपको वर्तमान संदर्भ में चालू करने के लिए आपूर्ति की गई आपके फ़ंक्शन को बांधना होगा। आप इसे कक्षा के निर्माता पर बांध सकते हैं या आप इसे सीधे चेंज() पर बांध सकते हैं जो कि अच्छा अभ्यास नहीं है।

class MonthsTable extends Component { 
    constructor(props){ 
    super(props); 
    this.handleChangeOnMonth = this.handleChangeOnMonth.bind(this); 
    } 
    handleChangeOnMonth(e){ 
    this.props.setMonth(e.target.id, e.target.value); // here the method is not found, causing error. 
    } 
    render(){ 
    console.log(this.props.setMonth) // here the method is present alright 
    return (<form> 
     {this.props.months.map((e, i) => 
     <input 
      type='number' 
      id={i} 
      key={i} // yes I know, bad habit, but in this case it doesn't matter 
      value={this.props.months[i]} 
      onChange={this.handleChangeOnMonth.bind(this)} />)} 
    </form>) 
    } 
}