Clear Form

It is an example to clear the state of the form.
There are two ways to clear the state.

1. props.handlers.onClear()
2. form.clear()

In this example we will use method 1.
You can easily implement state clearing by simply specifying handlers.onClear() in the handler of the button component onClick.

Example:

Values:

{}

Sample Code:

import React from 'react';
import { dripForm } from 'react-drip-form';
import {
  Input,
  FieldGroup,
  Checkbox,
  Radio,
} from 'react-drip-form-components';

const ClearForm = dripForm({
  validations: {
    name: {
      required: true,
      max: 32,
    },
    gender: {
      required: true,
    },
    colors: {
      required: true,
    },
  },
})(({
  handlers,
  meta: { invalid, pristine },
}) => (
  <form onSubmit={handlers.onSubmit}>
    <div>
      <label htmlFor="name">Name</label>
      <Input
        type="text"
        id="name"
        name="name"
        label="Name"
      />
    </div>

    <div>
      <label>Gender</label>
      <FieldGroup name="gender">
        <Radio value="female">Female</Radio>
        <Radio value="male">Male</Radio>
        <Radio value="other">Other</Radio>
        <Radio value="none">Rather not say</Radio>
      </FieldGroup>
    </div>

    <div>
      <label>Favorite Colors</label>
      <FieldGroup name="colors" multiple>
        <Checkbox value="white">White</Checkbox>
        <Checkbox value="black">Black</Checkbox>
        <Checkbox value="blue">Blue</Checkbox>
        <Checkbox value="red">Red</Checkbox>
        <Checkbox value="pink">Pink</Checkbox>
      </FieldGroup>
    </div>

    <Button
      primary
      onClick={handlers.onSubmit}
      disabled={invalid || pristine}
    >
      Send message
    </Button>

    {' '}

    <Button
      onClick={handlers.onClear}
      disabled={pristine}
    >
      Clear
    </Button>
  </form>
));