Basic example

This is a thorough description of the basic example implemented in examples/src/BasicExample.js.

Render

<Form
  store={'basic-example-form'}
  onSubmit={handleSubmit}
>
  <Field
    label="What's your name"
    name="name"
  />
</Form>

This basic render function has a simple Form component and a Field component and the output is a labeled text input field and a submit button. When pressing the button, the onSubmit callback is invoked with an object containing all the values collected by the form.

Form data

When the form is submitted, the onSubmit callback is invoked with all the data collected in the form, in addition to a callback used to reset the Form component.

(formData, imDone) => {
  console.log(formData); // { name: 'your input' }
  imDone();
}

Prior to the onSubmit function call, the data are validated according to rules specified in the <Field /> components.

In order to prevent double clicks, and to indicate loading, the submit button is disabled during form handling. By calling imDone(), the submit button is reset to it's initial state.