ReactJS: Triggering event onBlur - reactjs

Question

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

Answer 1

In the parent component:
_handleBlur (eventData) {}
render () {
const handleBlur = this._handleBlur.bind(this);
return (
<form>
<ChildComponent onBlur={handleBlur} {...moreProps} />
<ChildComponent onBlur={handleBlur} {...moreProps} />
<ChildComponent onBlur={handleBlur} {...moreProps} />
<button type="submit" onClick={handleBlur}>Submit</button>
</form>
);
}
In the child component:
render () {
const props = this.props;
return (
<div>
<div className="form-group">
<label htmlFor={props.id}>{props.label}</label>
<input
id={props.id}
type={props.type}
className="form-control"
onBlur={props.onBlur}
/>
<p className="text-danger">{this.error}</p>
</div>
</div>
);
}
Based on eventData or other params, you can define which field needs to be blurred. I don't know what exactly needs to happen on blur. In some cases it might be better to split it into a handleBlur and handleBlurAll method.
Hope this helps