Skip to content

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>
        );
    }
}
Clone this wiki locally