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
  • Parameters
  • Example
  1. Components
  2. Form
  3. Callbacks

onFirstChange

Specification

A callback function dispatched once when the first value change of a field happens.

Parameters

Param

Type

Description

event

Event

Change event reference.

prevValue

any

Previous value of the changed field.

nextValue

any

Next value of the changed field.

fieldProps

Object

Props of the field that triggered the change.

fields

Object

Reference to all fields in the form.

form

Object

Form component reference.

Example

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

export default class Example extends React.Component {
  handleFirstChange = ({ event, prevValue, nextValue, fieldProps, fields, form }) => {
    console.log('Field `%s` made the form dirty.', fieldProps.name)
  }

  render() {
    return (
      <Form onFirstChange={this.handleFirstChange}>
        {/* Fields here */}
      </Form>
    )
  }
}
PreviousCallbacksNextonReset

Last updated 6 years ago