Getting started
High-order components
Components
Developers
reset()
Specification
Resets the values of the uncontrolled fields of a form to their initial values.
Note that
Form.reset() will not affect controlled fields. To reset them use Form.onReset callback method handler, which is called after Form.reset() is finished.Example
Submit callback handlers
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
handleSubmitted = ({ res, fields, form }) => {
7
form.reset() // resets "username" field to "admin"
8
}
9
10
render() {
11
return (
12
<Form onSubmitted={this.handleSubmitted}>
13
<Input
14
name="username"
15
initialValue="admin" />
16
</Form>
17
)
18
}
19
}
Copied!
Form reference
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 MyForm extends React.Component {
6
handleButtonClick = () => {
7
this.form.reset() // resets "username" field to "admin"
8
}
9
10
render() {
11
return (
12
<Form ref={form => this.form = form}>
13
<Input
14
name="username"
15
initialValue="admin" />
16
<button onClick={this.handleButtonClick}>Reset</button>
17
</Form>
18
)
19
}
20
}
Copied!
Reset controlled fields
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 MyForm extends React.Component {
6
state = {
7
username: 'foo'
8
}
9
10
handleUsernameChange = ({ nextValue }) => {
11
this.setState({ username: nextValue })
12
}
13
14
resetForm = () => {
15
this.setState({ username: '' })
16
}
17
18
render() {
19
const { username } = this.state
20
21
return (
22
<Form onReset={this.resetForm}>
23
<Input
24
name="username"
25
value={username}
26
onChange={this.handleUsernameChange} />
27
<Form>
28
)
29
}
30
}
Copied!
Last modified 3yr ago