How to access the state of the child in response?

Question

I created my own form component with the render () method, which looks like this:

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

Please note that children appear here as {this.props.children} , so the user can use this component as follows:

  <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> 

I would like to check the status of each Input component (to get its authenticity) inside onSubmitMethod() .

  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

I did a similar thing in the project, passing the state of the parent as a support in the child to access the data of the child components in the parent component for the form elements.

In your case, if you send the state of the component in your child as a support, and each child uses the state of the parent type, for example this.props.state.variablename, and not this.state.variablename. You will have control over the state / data of the child components.

Sending state to children from a form component using this.prop.children as a support is not straightforward. The link below helps with this.

fooobar.com/questions/17490 / ...

Example:

Parent component:

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

Child component

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

Let me know if you need more information.

Answer 2

Put a ref , say myinput , to the child and get its state this.refs.myinput.state to access the child state if you need to.

However, take a look at this thread before setting ref . There is a better model.

Answer 3

The input must contain ref. It's simple. But since the Inputs are defined inside the parent Form component (made as a component inside the Form component (due to {this.props.children} )) I have to access the parent Form element using child_owner._instance . The relevant piece of code is now:

  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; }