javascript - How to access child state in react? - Stack Overflow

admin管理员组

文章数量:1277401

I have made my own form ponent with render() method looks like this:

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

Notice that children are rendered here as {this.props.children}, so the user can use this ponent like this:

 <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 state of each Input ponent (to get its validity) 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);

}

I have made my own form ponent with render() method looks like this:

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

Notice that children are rendered here as {this.props.children}, so the user can use this ponent like this:

 <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 state of each Input ponent (to get its validity) 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);

}

• javascript
• reactjs

Share Improve this question Follow edited Aug 4, 2017 at 17:41 HoldOffHunger 21k1111 gold badges120120 silver badges146146 bronze badges asked Oct 21, 2016 at 9:55 Vlado PandžićVlado Pandžić 5,05888 gold badges4949 silver badges8181 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I have done similar thing in a project by passing state of parent as a prop in child to access child ponent data in parent ponent for form elements.

In your case if you send ponent's state in its child as a prop and each child use state of parent like this.props.state.variablename and not this.state.variablename. You will have control on child ponents' states / data.

Sending state to childrens from form ponent using this.prop.children as a prop is not straight forward. Below link helps in doing this.

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

Example:

Parent ponent:

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

Child ponent

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

Put a ref, say myinput, to the child and get its state by this.refs.myinput.state to access the child's state if you have to.

However, take a look at this thread before you put the ref. There is a better pattern.

Input should have ref defined. That is easy. But because Inputs are defined inside Form's parent ponent (altought rendered inside Form ponent (because of {this.props.children}) I should access Form ponent's parent using child_owner._instance . Relevant part 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;
}

本文标签： javascriptHow to access child state in reactStack Overflow