reset()

Specification

Resets the values of the uncontrolled fields of a form to their initial values.

Example

Submit callback handlers

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>
    )
  }
}

Form reference

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>
    )
  }
}

Reset controlled fields

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>
    )
  }
}

Last updated