प्रतिक्रिया में बाल राज्य तक कैसे पहुंचे?

Question

मैं के साथ अपने खुद के रूप घटक बना दिया है प्रस्तुत करना() विधि इस प्रकार है:

render() { 
    return (
     <form onSubmit={this.onSubmit} ref={(c)=>this._form=c}> 
      {this.props.children} 
     </form> 
    ) 
} 

सूचना है कि बच्चों को यहां {this.props.children} रूप में प्रदान की जाती है, इसलिए उपयोगकर्ता इस तरह इस घटक का उपयोग कर सकते हैं:

<Form onSubmit={this.submit} > 
      <Input name={"name"} id="name" labelName="Ime" placeholder="Unesite ime" type="text" > 
       <Validation rule="required" message="Ovo je obavezno polje"/> 
      </Input> 
      <Input name={"email"} id="email" labelName="Email" placeholder="Unesite email adresu" type="text" > 
       <Validation rule="required" message="Ovo je obavezno polje"/> 
       <Validation rule="email" message="Ovo je nije valjana email adresa"/> 
      </Input> 
      <button type="submit" value="Pošalji" >Pošalji</button> 
     </Form> 

मैं onSubmitMethod() के अंदर प्रत्येक Input घटक (इसकी वैधता प्राप्त करने के लिए) की स्थिति जांचना चाहता हूं।

checkValidity() { 
    var sefl = this; 
    this.props.children.map((child) => { 
     if (child.type.name === "Input") { 

//How to get state of child here 
     } 
    }); 
} 
onSubmit(event) { 
    event.preventDefault(); 
    var obj = serialize(this._form, { hash: true }); 
    const validityOfForm = true; //hardcoded for now 
    this.checkValidity(); 
    this.props.onSubmit(obj, validityOfForm); 

} 

Answer 1

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

यदि आप अपने बच्चे में एक घटक के रूप में घटक की स्थिति भेजते हैं और प्रत्येक बच्चे माता-पिता की स्थिति का उपयोग करता है तो आपके मामले में इस.props.state.variablename की तरह और यह नहीं .state.variablename । आपके पास बाल घटकों के राज्यों/डेटा पर नियंत्रण होगा।

इस प्रोप के रूप में इस.prop.children का उपयोग करके फॉर्म घटक से बच्चों को राज्य भेजना सीधे आगे नहीं है। नीचे लिंक यह करने में मदद करता है।

https://stackoverflow.com/a/32371612/1708333

उदाहरण:

जनक घटक:

<FormFields 
    state={this.state} 
    _onChange={this._onChange} 
/> 

बाल घटक

<Input 
    name="fieldname" 
    value={this.props.state.fieldname} 
    type="text" 
    label="Lable text" 
    validationMessage={this.props.state.validationMessages.fieldname} 
    onChange={this.props._onChange} 
/> 

अगर आपको अधिक जानकारी चाहिए तो मुझे बताएं।

Answer 2

रखो एक ref, कहते हैं कि myinput, बच्चे के लिए और बच्चे के राज्य का उपयोग करने की this.refs.myinput.state द्वारा अपने राज्य पाने के लिए यदि आप के लिए है।

हालांकि, ref डालने से पहले इस thread पर नज़र डालें। एक बेहतर पैटर्न है।

Answer 3

इनपुट को परिभाषित किया जाना चाहिए था। वह आसान है। लेकिन क्योंकि इनपुट फार्म की मूल घटक के अंदर परिभाषित कर रहे हैं (Altought पर्चा घटक ({this.props.children} की वजह से) मैं child_owner._instance का उपयोग कर Form घटक के माता-पिता का उपयोग करना चाहिए के भीतर प्रस्तुत किये कोड के प्रासंगिक हिस्सा है:।

checkValidity() { 
    var sefl = this; 
    var errorsCount = 0; 
    this.props.children.map((child) => { 

     if (child.type.name === "Input") { 
      var refs = child._owner._instance.refs; 
      var rules = refs[child.ref].state.validationRules; 
      var hiddenRules = refs[child.ref].state.validationRulesHidden; 
      if (_.filter(_.values(rules), (elem) => elem == true).length > 0 || _.filter(_.values(hiddenRules), (elem) => elem == true).length>0) { 
       errorsCount++; 
      } 
     } 

    }); 
    if (errorsCount == 0) { 
     return true; 
    } 
    return false; 
}