Reset Form

It is an example to reset the state of the form. Unlike clear, reset restores the initial value.
There are two ways to reset the state.

1. props.handlers.onReset()
2. form.reset()

Example:

Values:

{
  "username": "tsuyoshiwada (initial value)",
  "gender": "female",
  "colors": [
    "white",
    "pink"
  ],
  "message": "Did you like react-drip-form? (initial message)"
}

Sample Code:

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


const ResetForm = dripForm({
  validations: {
    name: {
      required: true,
      max: 32,
    },
    gender: {
      required: true,
    },
    colors: {
      required: true,
    },
  },
})(({
  handlers,
  meta: { invalid, pristine },
}) => (
  <form onSubmit={handlers.onSubmit}>
    <div>
      <label htmlFor="username">Username</label>
      <Input type="text" id="username" name="username" />
    </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>

    <div>
      <label htmlFor="message">Message</label>
      <Textarea id="message" name="message" />
    </div>

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

    {' '}

    <Button
      onClick={handlers.onReset}
      disabled={pristine}
    >
      Reset
    </Button>
  </form>
));