title: ReactJS: Triggering event onBlur
body: <p>I am having child component for input fields which is checking its validation <code>onBlur</code> event.</p>
  
  <p>Child component usage:</p>
  
  <pre><code>&lt;TextInput
      id={'lastName'}
      label={'Last name'}
      required={true}
      minChars={3}
      maxChars={25}
  /&gt;
  </code></pre>
  
  <p>Child component code:</p>
  
  <pre><code>onBlur(event) {
      // logic here
  }
  
  render() {
      let props = this.props;
  
      return (
          &lt;div&gt;
              &lt;div className="form-group"&gt;
                  &lt;label htmlFor={props.id}&gt;{props.label}&lt;/label&gt;
                  &lt;input
                      id={props.id}
                      type={props.type}
                      className="form-control"
                      onBlur={this.onBlur.bind(this)}
                  /&gt;
                  &lt;p className="text-danger"&gt;{this.error}&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>This works just fine. </p>
  
  <p>When user submits form from parent component, I would like onBlur to be triggered across all inputs. How could I accomplish this?</p>