Clear and reset form input fields

Question

I have a form containing various input fields and two buttons  one for submitting and one for cancelling    lt form id  create-course-form  gt     lt input type  text  name  course Name  ref  fieldName  gt     lt input type  text  name  course org  ref  fieldOrg  gt     lt input type  text  name  course Number  ref  fieldNum  gt      lt input type  submit  name  saveCourse  value  Create  gt     lt input type  button  name  cancelCourse  value  cancel  onClick  this cancelCourse  gt   lt  form gt    What I want is to empty all inputs when the cancel button is clicked  So far I ve managed to do this by using each input s ref prop   cancelCourse      this refs fieldName value       this refs fieldorg value       this refs fieldNum value         However  I want to empty the input fields without having to empty each one seperately  I want something similar to this  jQuery       create-course-form input type text    val

User · Answer

Why not use HTML-controlled items such as  lt input type  quot reset quot  gt

User · Answer

I don t know if this is still relevant  But when I had similar issue this is how I resolved it    Where you need to clear an uncontrolled form you simply do this after submission   this  lt ref-name-goes-here gt  setState  value          Hope this helps

User · Answer

To clear your form  admitted that your form s elements values are saved in your state  you can map through your state like that          clear all your form   Object keys this state  map  key  index    gt          this setState   key                   If your form is among other fields  you can simply insert them in a particular field of the state like that     state            form            name             email                       handle set in nested objects       handleChange    e    gt            e preventDefault              const newState   Object assign     this state           newState form e target name    e target value          this setState newState                     submit and clear state in nested object        onSubmit    e    gt            e preventDefault             var form     Object assign     this state form          Object keys form  map  key  index    gt              form key                             this setState  form

User · Answer

See newState and use of it in eventSubmit   for resetting all the state  I have tested it is working for me  Please let me know for mistakes    import React from  react            const newState             fullname              email                    class Form extends React Component           constructor props                super props               this state                     fullname                       email                                     this eventChange   this                  eventChange                  bind this               this eventSubmit   this                  eventSubmit                  bind this                     eventChange event                const target   event target              const value   target type      checkbox                    target type                   target value              const name   target name                   this setState   name   value                          eventSubmit event                alert JSON stringify this state               event preventDefault                this setState     newState                           render                 return                    lt div className  quot container quot  gt                       lt form className  quot row mt-5 quot  onSubmit  this eventSubmit  gt                           lt label className  quot col-md-12 quot  gt                              Full Name                              lt input                                 type  quot text quot                                  name  quot fullname quot                                  id  quot fullname quot                                  value  this state fullname                                  onChange  this eventChange   gt                           lt  label gt                           lt label className  quot col-md-12 quot  gt                              email                              lt input                                 type  quot text quot                                  name  quot email quot                                  id  quot email quot                                  value  this state value                                  onChange  this eventChange   gt                           lt  label gt                           lt input type  quot submit quot  value  quot Submit quot   gt                       lt  form gt                   lt  div gt                                         export default Form

User · Answer

state      name       email       handalSubmit        gt      after api call    let resetFrom        fetch  url      then function response        if response success          resetFrom            name               email                         this setState     resetFrom

User · Answer

Very easy      x000D   x000D  handleSubmit e   x000D      e preventDefault    x000D      e target reset    x000D    x000D   lt form onSubmit  this handleSubmit bind this   gt  x000D        x000D   lt  form gt  x000D   x000D   x000D    Good luck

User · Answer

x000D   x000D  import React    Component   from  react   export default class Form extends Component     constructor props        super props      this formRef   React createRef       this state           email            loading  false        eror  null              reset        gt        this formRef current reset          render         return          lt div gt           lt form gt             lt input type  email  name    id     gt             lt button type  submit  gt Submit lt  button gt             lt button onClick      gt this reset    gt Reset lt  button gt           lt  form gt         lt  div gt              x000D   x000D   x000D

User · Answer

The answer here depends on whether or not your inputs are controlled or uncontrolled  If you are unsure or need more info on this  check out what the official docs say about controlled components and uncontrolled components  Thanks  Dan-Esparza for providing the links  Also  please note that using string literals in ref is deprecated  Use the standard callback method instead   Clearing a form with uncontrolled fields You can clear the entire form rather than each form field individually  cancelCourse        gt       document getElementById  quot create-course-form quot   reset       render       return        lt form id  quot create-course-form quot  gt         lt input   gt         lt input   gt                   lt input   gt       lt  form gt          If your form didn t have an id attribute you could use a ref as well  cancelCourse        gt       this myFormRef reset       render       return        lt form ref   el    gt  this myFormRef   el   gt         lt input   gt         lt input   gt                   lt input   gt       lt  form gt           Clearing a form with controlled fields If you are using controlled form fields  you may have to explicitly reset each component inside your form  depending on how your values are stored in the state  If they are declared individually  you need to reset each one explicitly  cancelCourse        gt       this setState       inputVal 1   quot  quot       inputVal 2   quot  quot               inputVal n   quot  quot            render       return        lt input value  this state inputVal 1  onChange  this handleInput1Change  gt       lt input value  this state inputVal 2  onChange  this handleInput2Change  gt               lt input value  this state inputVal n  onChange  this handleInputnChange  gt          Demo below   x000D   x000D  class MyApp extends React Component     constructor         super        this state           inputVal 1            inputVal 2            inputVal 3            inputVal 4            inputVal 5            inputVal 6            inputVal 7            inputVal 8            inputVal 9            inputVal 10                     handleInput1Change    e    gt        this setState  inputVal 1  e target value             handleInput2Change    e    gt        this setState  inputVal 2  e target value             handleInput3Change    e    gt        this setState  inputVal 3  e target value             handleInput4Change    e    gt        this setState  inputVal 4  e target value             handleInput5Change    e    gt        this setState  inputVal 5  e target value             handleInput6Change    e    gt        this setState  inputVal 6  e target value             handleInput7Change    e    gt        this setState  inputVal 7  e target value             handleInput8Change    e    gt        this setState  inputVal 8  e target value             handleInput9Change    e    gt        this setState  inputVal 9  e target value             handleInput10Change    e    gt        this setState  inputVal 10  e target value             cancelCourse        gt         this setState         inputVal 1            inputVal 2            inputVal 3            inputVal 4            inputVal 5            inputVal 6            inputVal 7            inputVal 8            inputVal 9            inputVal 10                      render         return          lt form gt           lt input value  this state inputVal 1  onChange  this handleInput1Change    gt           lt input value  this state inputVal 2  onChange  this handleInput2Change    gt           lt input value  this state inputVal 3  onChange  this handleInput3Change    gt           lt input value  this state inputVal 4  onChange  this handleInput4Change    gt           lt input value  this state inputVal 5  onChange  this handleInput5Change    gt           lt input value  this state inputVal 6  onChange  this handleInput6Change    gt           lt input value  this state inputVal 7  onChange  this handleInput7Change    gt           lt input value  this state inputVal 8  onChange  this handleInput8Change    gt           lt input value  this state inputVal 9  onChange  this handleInput9Change    gt           lt input value  this state inputVal 10  onChange  this handleInput10Change    gt           lt input type  submit  name  saveCourse  value  Create    gt           lt input type  button  name  cancelCourse  value  cancel  onClick  this cancelCourse    gt         lt  form gt                ReactDOM render  lt MyApp   gt   document getElementById  app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt   lt div id  app  gt  lt  div gt  x000D   x000D   x000D   There is a cleaner way to do this though  Rather than having n state properties and n event handlers  one for each input  with some clever coding we can reduce the code dramatically  In the constructor we just declare an empty object  which will be used to hold input values  We use only one input handler and pass it the index of the input element we want to change the value of  This means that the value of an individual input is generated the moment we start typing into it  To reset the form  we only need to set our input object back to being empty again  The input value is this state inputVal i   If i doesn t exist  we haven t typed anything yet into that input  we want the value to be an empty string  instead of null   cancelCourse        gt       this setState  inputVal           render       return        lt form gt             Array n   map           item  i    gt   lt input value  this state inputVal i      quot  quot   onChange  this handleInputChange bind this  i     gt                lt  form gt          Demo below   x000D   x000D  class MyApp extends React Component     constructor         super        this state           inputVal                     handleInputChange    idx   target     gt        this setState   inputVal     gt          inputVal idx    target value        return inputVal                   cancelCourse        gt         this setState  inputVal                 render         return         lt form gt               Array 10   map     create an array with a length of 10            item  i    gt   lt input value  this state inputVal i         onChange  this handleInputChange bind this  i     gt     bind the index to the input handler                     lt input type  submit  name  saveCourse  value  Create    gt           lt input type  button  name  cancelCourse  value  cancel  onClick  this cancelCourse    gt         lt  form gt                ReactDOM render  lt MyApp   gt   document getElementById  app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt   lt div id  app  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can also do it by targeting the current input  with anything target reset     This is the most easiest way   handleSubmit e    e preventDefault     e target reset        lt form onSubmit  this handleSubmit  gt         lt  form gt

User · Answer

Using event target reset   only works for uncontrolled components  which is not recommended  For controlled components you would do something like this   import React    Component   from  react   class MyForm extends Component     initialState     name          state   this initialState    handleFormReset        gt        this setState      gt  this initialState         render          return          lt form onReset  this handleFormReset  gt           lt div gt             lt label htmlFor  name  gt Name lt  label gt             lt input             type  text              placeholder  Enter name              name  name              value  name              onChange  this handleInputOnChange              gt           lt  div gt           lt div gt             lt input             type  submit              value  Submit              gt             lt input             type  reset              value  Reset              gt           lt  div gt         lt  form gt               ContactAdd propTypes       export default MyForm

User · Answer

This one works best to reset the form    import React    Component   from  react  class MyComponent extends Component     constructor props       super props      this state           inputVal  props inputValue              preserve the initial state in a new object     this baseState   this state     gt  gt  gt  gt  gt  gt  gt  gt  gt  note this one        resetForm        gt        this setState this baseState      gt  gt  gt  gt  gt  gt  gt  gt  gt  note this one        submitForm        gt           submit the form logic       updateInput   val   gt  this setState   inputVal  val      render         return          lt form gt           lt input           onChange  this updateInput            type  text           value  this state inputVal    gt           lt button           onClick  this resetForm            type  button  gt Cancel lt  button gt           lt button           onClick  this submitForm            type  submit  gt Submit lt  button gt         lt  form gt

User · Answer

Following code should reset the form in one click    x000D   x000D  import React    Component   from  react   x000D   x000D  class App extends Component   x000D      constructor props   x000D       super props   x000D       this handleSubmit this handleSubmit bind this   x000D        x000D      handleSubmit e   x000D      this refs form reset    x000D        x000D      render    x000D          return  x000D           lt div gt  x000D            lt form onSubmit  this handleSubmit  ref  form  gt  x000D                   lt input type  text  placeholder  First Name   ref  firstName   gt  lt br  lt br  gt  x000D                lt input type  text  placeholder  Last Name   ref  lastName   gt  lt br  gt  lt br  gt  x000D                   lt button type  submit   gt submit lt  button gt  x000D               lt  form gt  x000D          lt  div gt  x000D        x000D    x000D   x000D   x000D

[reactjs] Clear and reset form input fields

Examples related to reactjs