प्रतिक्रिया - क्या एक बाल घटक मूल्य पत्र को वापस भेज सकता है

Question

InputField & Button कस्टम घटक हैं जो फ़ॉर्म बनाने के लिए एक रूप में जाते हैं। मेरे मुद्दा है मैं डेटा वापस ऊपर भेजूँ कैसे इतना है कि बटन पर क्लिक के रूप में, मैं डेटा के साथ प्रपत्र (उपयोगकर्ता नाम & पासवर्ड) पर ajax आग कर सकते हैं:

export default auth.authApi(
    class SignUpViaEmail extends Component{ 

    constructor(props){ 
     super(props); 
     this.state = { 
     email : "", 
     password : "" 
     }; 
     this.storeEmail = this.storeEmail.bind(this); 
     this.storePassword = this.storePassword.bind(this); 
    } 

    storeEmail(e){ 
     this.setState({ email : e.target.value }); 
    } 

    storePassword(e){ 
     this.setState({ password : e.target.value }); 
    } 

    handleSignUp(){ 
     this.props.handleSignUp(this.state); 
    } 

    render(){ 
     return(
     <div className="pageContainer"> 

      <form action="" method="post"> 
      <InputField labelClass = "label" 
         labelText = "Username" 
         inputId = "signUp_username" 
         inputType = "email" 
         inputPlaceholder = "registered email" 
         inputClass = "input" /> 
      <Button btnClass = "btnClass" 
        btnLabel = "Submit" 
        onClickEvent = { handleSignUp } /> 
      </form> 
     </div> 
    ); 
    } 

    } 
); 

या यह अनुशंसित नहीं है & मैं नहीं करना चाहिए फॉर्म के भीतर कस्टम बाल घटक बनाएँ?

बच्चे घटक =>InputField

import React, 
     { Component } from "react"; 

export class InputField extends Component{ 

    constructor(props){ 
    super(props); 
    this.state = { 
     value : "" 
    }; 
    this.onUserInput = this.onUserInput.bind(this); 
    } 

    onUserInput(e){ 
    this.setState({ value : e.target.value }); 
    this.props.storeInParentState({[ this.props.inputType ] : e.target.value }); 
    } 

    render(){ 
    return <div className = ""> 
       <label htmlFor = {this.props.inputId} 
        className = {this.props.labelClass}> 
       {this.props.labelText} 
       </label> 
       <input id = {this.props.inputId} 
        type = {this.props.inputType} 
        onChange = {this.onUserInput} /> 
       <span className = {this.props.validationClass}> 
       { this.props.validationNotice } 
       </span> 
      </div>; 
    } 
} 

त्रुटि: मैं माता पिता storeEmail समारोह पर त्रुटि e.target is undefined मिलता है।

Answer 1

प्रतिक्रिया एक-तरफा डेटा-बाइंडिन जी मॉडल का मतलब है कि बच्चे के घटक पैरेंट घटकों को पर मूल्य वापस नहीं भेज सकते हैं जब तक कि ऐसा करने की स्पष्ट अनुमति नहीं दी जाती। ऐसा करने का सही तरीका बाल घटक को कॉलबैक पास करना है (Facebook's "Forms" guide देखें)।

class Parent extends Component { 
    constructor() { 
    this.state = { 
     value: '' 
    }; 
    } 

    //... 

    handleChangeValue = e => this.setState({value: e.target.value}); 

    //... 

    render() { 
    return (
     <Child 
     value={this.state.value} 
     onChangeValue={this.handleChangeValue} 
     /> 
    ); 
    } 
} 

class Child extends Component { 
    //... 

    render() { 
    return (
     <input 
     type="text" 
     value={this.props.value} 
     onChange={this.props.onChangeValue} 
     /> 
    ); 
    } 
} 

लें ध्यान दें कि माता पिता घटक, राज्य संभालती है, जबकि बच्चे घटक केवल प्रदर्शित हैंडल। Facebook's "Lifting State Up" guide यह सीखने के लिए एक अच्छा संसाधन है कि यह कैसे करें।

इस तरह, सभी डेटा मूल घटक (राज्य में) के भीतर रहता है, और बाल घटकों को केवल उस डेटा को अपडेट करने का तरीका दिया जाता है (प्रोप के रूप में कॉलबैक पास किए जाते हैं)। अब आपकी समस्या हल हो गई है: आपके मूल घटक के पास आवश्यक सभी डेटा तक पहुंच है (क्योंकि डेटा राज्य में संग्रहीत है), लेकिन आपके बच्चे के घटक डेटा को अपने व्यक्तिगत तत्वों जैसे <input> टैग पर बाध्य करने का प्रभारी हैं।

Answer 2

आप एक "रेफरी नाम" अपने InputField में जोड़ सकते हैं ताकि आप इसे से कुछ समारोह कॉल कर सकते हैं, जैसे:

this.refs.userInput.getUsernamePassword(); 

कहाँ:

<InputField 
    ref="userInput" 
    labelClass = "label" 
    labelText = "Username" 
    inputId = "signUp_username" 
    inputType = "email" 
    inputPlaceholder = "registered email" 
    inputClass = "input" /> 

तो तुम refs का उपयोग कर इसे उपयोग कर सकते हैं getUsernamePassword फ़ंक्शन इनपुटफिल्ल्ड घटक के अंदर होगा, और रिटर्न के साथ आप राज्य सेट कर सकते हैं और अपने props.handleSignUp