Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
96 lines (76 sloc) 2.14 KB

reset()

Specification

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

{% hint style="danger" %} 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. {% endhint %}

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>
    )
  }
}
You can’t perform that action at this time.