-
Notifications
You must be signed in to change notification settings - Fork 9
How to onBlur
NewOldMax edited this page Mar 28, 2017
·
1 revision
If you want to validate inputs with onBlur
event, you can do this following way:
import React from 'react';
import { Button } from 'react-native';
import { Form, TextValidator } from 'react-native-validator-form';
export default class SomeComponent extends React.Component {
constructor() {
super();
this.state = { data: {} };
this.handleValue = this.handleValue.bind(this);
this.handleBlur = this.handleBlur.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleValue(event) {
const { data } = this.state.data;
data.text = event.nativeEvent.text;
this.setState({ data });
}
handleBlur() {
this.someInput.validate(this.state.data.text);
}
submit() {
// your submit logic
}
handleSubmit() {
this.refs.form.submit();
}
render() {
const { data } = this.state;
return (
<Form
ref="form"
onSubmit={this.submit}
instantValidate={false}
>
<TextValidator
ref={(someInput) => { this.someInput = someInput; }}
name="text"
value={data.text}
onBlur={this.handleBlur}
onChange={this.handleValue}
validators={['required']}
errorMessages={['This field is required']}
/>
<Button
title="Submit"
onPress={this.handleSubmit}
/>
</Form>
);
}
}