onReset

Specification

A callback method called once Form.reset() is finished. Useful for reseting the values of the controlled fields, as Form.reset() affects only uncontrolled fields.

Definition

type OnReset = ({
  fields: Object, // The state of the fields
  form: ReactComponent // Reference to the Form component
}) => void

Example

import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'

export default class Example extends React.Component {
    constructor() {
        super();
        this.state = {
            password: ''
        }
    }

    handleManualReset = (event) => {
        event.preventDefault()
        this.form.reset() // resets uncontrolled fields ("username")
    }

    handleReset = ({ fields, form }) => {
        this.setState({ password: '' }) // manually reset controlled fields ("password")
    }

    render() {
        const { password } = this.state

        return (
            <Form
                ref={form => this.form = form}
                onReset={this.handleReset}>
                <Input
                    name="username"
                    required />
                <Input
                    name="password"
                    value={password}
                    onChange={({ nextValue }) => {
                        this.setState({ password: nextValue })
                    }}
                    required />
                <button onClick={this.handleManualReset}>Reset</button>
            </Form>
        )
    }
}