यह सबमिशन फ़ंक्शन पर प्रतिक्रिया फ़ॉर्म में क्यों नहीं है?

Question

मेरी प्रतिक्रिया घटक में मैं किसी कारण जब मैं प्रपत्र ऑनसबमिट का उपयोग this.props दायरे में नहीं है के लिए ऑनसबमिट समारोह

<form className="form-horizontal" name="taskForm" onSubmit={this.submitTask}>

submitTask(e) { 

    e.preventDefault(); 
    console.log(this.props); // undefined 
    console.log(this) // window object 
} 

साथ एक रूप है। जब मैं console.log(this.props) कन्स्ट्रक्टर में, प्रोप सामान्य रूप से लॉग आउट करता है।

जब मैं console.log(this) यह विंडो ऑब्जेक्ट है। मैं प्रतिक्रिया घटक का दायरा कैसे प्राप्त करूं?

Answer 1

यह अधिक व्यापक समस्या है, क्योंकि इस के साथ समान व्यवहार करते समय आपने उदाहरण के लिए अन्य घटक घटनाओं का उपयोग करें (onClick, onChange, ऑनसबमिट)

प्रलेखन में इसके बारे में टिप्पणी है देखेंगे:

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

तरीके नियमित ES6 वर्ग के रूप में एक ही अर्थ विज्ञान का पालन करें, जिसका अर्थ है कि वे अपने आप उदाहरण के लिए इस बाँध नहीं है। आपको स्पष्ट रूप से उपयोग करना होगा। बाइंड (यह) या तीर फ़ंक्शंस =>।

जैसा कि वर्णन किया गया है कि आपको उन तरीकों को बांधना है या तीर कार्यों का उपयोग करना है। यदि आप बाध्यकारी चुनते हैं, तो आप कन्स्ट्रक्टर या सख्ती से प्रस्तुत घटक में बाध्य कर सकते हैं।

निर्माता में:

constructor(props) { 
    super(props); 
    this.submitTask = this.submitTask.bind(this); 
} 

गाया घटक में:

<form className="form-horizontal" name="taskForm" onSubmit={this.submitTask.bind(this)}> 

तीर समारोह के साथ आप तीर को समारोह submitTask सामग्री पारित कर सकते हैं:

<form className="form-horizontal" name="taskForm" onSubmit={e => { 
    e.preventDefault(); 
    console.log(this.props); // undefined 
    console.log(this) // window object 
}}>