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
1
type OnReset = ({
2
  fields: Object, // The state of the fields
3
  form: ReactComponent // Reference to the Form component
4
}) => void
Copied!
Example
1
import React from 'react'
2
import { Form } from 'react-advanced-form'
3
import { Input } from 'react-advanced-form-addons'
4
​
5
export default class Example extends React.Component {
6
    constructor() {
7
        super();
8
        this.state = {
9
            password: ''
10
        }
11
    }
12
​
13
    handleManualReset = (event) => {
14
        event.preventDefault()
15
        this.form.reset() // resets uncontrolled fields ("username")
16
    }
17
​
18
    handleReset = ({ fields, form }) => {
19
        this.setState({ password: '' }) // manually reset controlled fields ("password")
20
    }
21
​
22
    render() {
23
        const { password } = this.state
24
​
25
        return (
26
            <Form
27
                ref={form => this.form = form}
28
                onReset={this.handleReset}>
29
                <Input
30
                    name="username"
31
                    required />
32
                <Input
33
                    name="password"
34
                    value={password}
35
                    onChange={({ nextValue }) => {
36
                        this.setState({ password: nextValue })
37
                    }}
38
                    required />
39
                <button onClick={this.handleManualReset}>Reset</button>
40
            </Form>
41
        )
42
    }
43
}
Copied!

onFirstChange

onInvalid

Last modified 3yr ago

Copy link

Contents

Specification

Definition

Example