React Advanced Form
  • Introduction
  • General
    • Comparison
      • Compared to Formik
      • Compared to Final form
    • Migration guides
      • 1.4.x → 1.5.x
    • FAQ
  • Getting started
    • Installation
    • Creating fields
    • Creating form
    • Validation rules
    • Validation messages
    • Applying validation
    • Handle submit
  • Architecture
    • Argument properties
    • Referencing
    • Field lifecycle
    • Controlled fields
    • Reactive props
  • Validation
    • Getting started
    • Validation schema
      • Rule definition
      • Reactive rule
    • Validation messages
  • High-order components
    • createField
      • Options
      • Field presets
      • Exposed props
  • Components
    • FormProvider
    • Form
      • Props
        • innerRef
        • initialValues
        • action
        • rules
        • messages
      • Methods
        • setValues()
        • setErrors()
        • reset()
        • validate()
        • serialize()
        • submit()
      • Callbacks
        • onFirstChange
        • onReset
        • onInvalid
        • onSerialize
        • onSubmitStart
        • onSubmitted
        • onSubmitFailed
        • onSubmitEnd
    • Field.Group
    • Field
      • Props
        • rule
        • asyncRule
        • skip
      • Callbacks
        • onFocus
        • onChange
        • onBlur
  • Recipes
    • Generating a form
    • Utilizing functions
  • Developers
    • Contributing
Powered by GitBook
On this page
  • Specification
  • Definition
  • Example
  1. Components
  2. Form
  3. Callbacks

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>
        )
    }
}
PreviousonFirstChangeNextonInvalid

Last updated 6 years ago