प्रतिक्रिया प्रपत्र घटक ऑनसबमिट हैंडलर

Question

काम नहीं कर रहा मैं निम्नलिखित है घटक प्रतिक्रिया: जैसा कि आप देख सकते हैं, मैं जब भी फ़ॉर्म सबमिट किया जाता handleSubmit समारोह के नाम से जाना चाहते हैं

class Form extends React.Component { 
    handleSubmit(e) { 
    e.preventDefault(); 

    let loginInput = ReactDOM.findDOMNode(this.refs.login); 

    // change Main component's state 
    this.props.addCard(loginInput.value); 

    // reset the form 
    loginInput.value = ''; 
    } 

    render() { 
    return(
     <form onSubmit={this.handleSubmit}> 
     <input placeholder="githug login" ref="login" /> 
     <button>Add Login</button> 
     </form> 
    ); 
    } 
} 

। मैंने यह कार्य onSubmit हैंडलर में जोड़कर इंगित किया है।

फ़ंक्शन सही समय पर लागू किया जा रहा है। हालांकि, उस फ़ंक्शन के भीतर this का मान null है। यह मेरे लिए आश्चर्यजनक है, क्योंकि मुझे प्रतिक्रिया घटक होने के लिए this का मान अपेक्षित था। तथ्य यह है कि this शून्य है मेरे लिए आश्चर्यजनक है, क्योंकि मैं official React documentation द्वारा सुझाए गए एक बहुत ही समान तर्क/कोड का उपयोग कर रहा हूं।

मैं यह पता लगाने में सहायता की सराहना करता हूं कि क्यों this प्रतिक्रिया घटक नहीं है, जैसा कि अपेक्षित है, और कोड को कैसे ठीक किया जाए।

Answer 1

आप ईवेंट हैंडलर्स

class Form extends React.Component { 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    }  

    handleSubmit(e) { 
    e.preventDefault(); 

    let loginInput = this.refs.login; 
    this.props.addCard(loginInput.value); 
    loginInput.value = ''; 
    } 

    render() { 
    return(
     <form onSubmit={ this.handleSubmit }> 
     <input placeholder="githug login" ref="login" /> 
     <button>Add Login</button> 
     </form> 
    ); 
    } 
} 

Example

No Autobinding

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