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 callback method handler, which is called after Form.reset()
is finished.
import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'
export default class Example extends React.Component {
handleSubmitted = ({ res, fields, form }) => {
form.reset() // resets "username" field to "admin"
}
render() {
return (
<Form onSubmitted={this.handleSubmitted}>
<Input
name="username"
initialValue="admin" />
</Form>
)
}
}
import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'
export default class MyForm extends React.Component {
handleButtonClick = () => {
this.form.reset() // resets "username" field to "admin"
}
render() {
return (
<Form ref={form => this.form = form}>
<Input
name="username"
initialValue="admin" />
<button onClick={this.handleButtonClick}>Reset</button>
</Form>
)
}
}
import React from 'react'
import { Form } from 'react-advanced-form'
import { Input } from 'react-advanced-form-addons'
export default class MyForm extends React.Component {
state = {
username: 'foo'
}
handleUsernameChange = ({ nextValue }) => {
this.setState({ username: nextValue })
}
resetForm = () => {
this.setState({ username: '' })
}
render() {
const { username } = this.state
return (
<Form onReset={this.resetForm}>
<Input
name="username"
value={username}
onChange={this.handleUsernameChange} />
<Form>
)
}
}