React JS: How to call a validation method of a custom Input component from its Parent

Question

I have written a custom Input class component.

class Input extends React.Component {
  validate = () => { 
    // validation logic
  }

  handleChange = () => {this.validate()}

  render () {
    return <input onChange={this.handleChange} name={this.props.name} type={this.props.type}/>
  }
}

In a Form component I use it like this.

class Form extends React.Component {

  handleSubmit () => {
    // trigger Input validation here
  }

  render () {
    return <form onSubmit={this.handleSubmit}>
      <Input name="abc" type=""/>
      <Input name="abc" type="password"/>
    </form>
  }
}

There can be more than 20 Input component nested in Form component. My question is how do I trigger validations of Input components from the Parent Form component when the form is submitted?. Since I have a lot of Input components I need to a way to call all the validation method of every Input instance.

Estus Flask · Accepted Answer · 2019-01-26 13:26:22Z

2

Parent component should have a ref of a child in order to access its methods:

  refs = {
    foo: React.createRef(),
    bar: React.createRef()
  }

  handleSubmit () => {
    for (const [refName, ref] of Object.entries(this.refs)) {
      const isValid = ref.current.handleSubmit();
      // ...
    }
  }

  render () {
    return <form onSubmit={this.handleSubmit}>
      <Input ref={this.refs.foo} name="foo"/>
      <Input ref={this.refs.bar} name="bar"/>
    </form>
  }

In case there are many inputs, the code could be made DRYer by automatically registering refs with respective names that match name attributes.

answered Jan 26, 2019 at 13:26

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vamshi · Accepted Answer · 2019-01-27 03:24:03Z

0

Please try the below code for calling function from child components.

class Parent extends React.Component {
    triggerChildAlert(){
        this.refs.child.showAlert();
    }

    handleSubmit () => {
       this.refs.child.validate ();
    }

    render() {
        return (
                <div>
                   {/* Note that you need to give a value to the ref parameter, 
                       in this case child*/}
                   <Child ref="child" />
                   <button onClick={this.handleSubmit}>Click</button>
                </div>
            );
        }
    }


class Child extends React.Component {
    validate () {

    }

    render() {
        return (

        );
    }
 }

edited Jan 27, 2019 at 3:24

Vamshi

9,3615 gold badges41 silver badges55 bronze badges

answered Jan 26, 2019 at 13:42

Nagesh Bhad

212 bronze badges

1 Comment

Lex Soft Over a year ago

You are using the old way of creating ref which is considered legacy. See reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs. You should use the new way as stated in the link, like user estus used in his answer above.

Collectives™ on Stack Overflow

React JS: How to call a validation method of a custom Input component from its Parent

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related