onFocus, onChange, onBlur

get access to the state everytime the user interacts with your form

Sometimes, access to the forms state is needed even before the user submits the form. This can be if you want to store the forms state on the server on every change (e.g. every time the user changes a input or everytime the user blurs an input) or you want to check if the users input is already taken (e.g. a user might not be allowed to use a email or a username that is already taken and you want to give the user a fast respond before the user even submits the form).

You are not able to modify the state on this callbacks since react-form-package takes care of the state management, but you can use the state to communicate with a server or change the UI corresponding to the current state. If you have an edge case where you have to modify the state of the input use preOnChange (see State Manipulation).

onFocus

import {
  Form,
  Field,
} from 'react-form-package';

Render a <Form /> with an email <Field /> component and a onFocus property.

Take a look at the console.

<Form>
  {/* do something with the state onFocus */}
  <Field
    id="email"
    type="email"
    value="test@example.com"
    onFocus={state => console.log(state)}
  />
</Form>

onChange

import {
  Form,
  Field,
} from 'react-form-package';

Render a <Form /> with an email <Field /> component and a onChange property.

Take a look at the console.

<Form>
  {/* do something with the state onChange */}
  <Field
    id="email"
    type="email"
    value="test@example.com"
    onChange={state => console.log(state)}
  />
</Form>

onBlur

import {
  Form,
  Field,
} from 'react-form-package';

Render a <Form /> with an email <Field /> component and a onBlur property.

Take a look at the console.

<Form>
  {/* do something with the state onBlur */}
  <Field
    id="email"
    type="email"
    value="test@example.com"
    onBlur={state => console.log(state)}
  />
</Form>