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!
Last modified 3yr ago