Clear an input field with Reactjs

Question

I am using a variable below    var newInput        title  this inputTitle value     entry  this inputEntry value          This is used by my input fields    lt input type  text  id  inputname  className  form-control  ref  el   gt  this inputTitle   el    gt      lt textarea id  inputage  ref  el   gt  this inputEntry   el  className  form-control    gt   lt button className  btn btn-info  onClick  this sendthru  gt Add lt  button gt    Once I activate  this sendthru  I want to clear my input fields  However  I am uncertain how to do so    Also  as shown in this example  it was pointed out to me that I should use the ref property for input values  What I am unclear of is what exactly does it mean to have  el   gt  this inputEntry   el   What is the significance of el in this situation

User · Answer

I m not really sure of the syntax  el    this inputEntry   el   but when clearing an input field you assign a ref like you mentioned    lt input type  text  ref  someName    gt    Then in the onClick function after you ve finished using the input value  just use     this refs someName value         Edit  Actually the  el    this inputEntry   el  is the same as this I believe  Maybe someone can correct me  The value for el must be getting passed in from somewhere  to act as the reference     function  el        this inputEntry   el

User · Answer

On the event of onClick this state     title       sendthru     gt     document getElementByid  inputname   value         this setState        title           lt input type  quot text quot  id  quot inputname quot  className  quot form-control quot  ref  el   gt  this inputTitle   el    gt      lt button className  quot btn btn-info quot  onClick  this sendthru  gt Add lt  button gt

User · Answer

Declare value attribute for input tag  i e value   this state name   and if you want to clear this input vale you have to use this setState  name         PFB working code for your reference     lt script type  text babel  gt      var StateComponent   React createClass           resetName   function event               this setState                   name                                         render   function                return                    lt div gt                       lt input type  text  value   this state name   gt                       lt button onClick  this resetName  gt Reset lt  button gt                   lt  div gt                                      ReactDOM render  lt StateComponent  gt   document getElementById  app      lt  script gt

User · Answer

I have a similar solution to  Satheesh using React hooks    State initialization    const  enteredText  setEnteredText    useState         Input tag    lt input type  text  value  enteredText    event handler  classNames  etc     gt    Inside the event handler function  after updating the object with data from input form  call    setEnteredText        Note   This is described as  two-way binding

User · Answer

The way I cleared my form input values was to add an id to my form tag  Then when I handleSubmit I call this clearForm    In the clearForm function I then use document getElementById  myForm   reset      import React   Component   from  react   import    App css   import Button from    components Button   import Input from    components Input    class App extends Component       state         item           list        componentDidMount         this clearForm         handleFormSubmit   event   gt       this clearForm      event preventDefault      const item   this state item      this setState            list      this state list  item                      handleInputChange   event   gt      this setState        item  event target value          clearForm        gt      document getElementById  myForm   reset       this setState       item                 render         return          lt form id  myForm  gt         lt Input             name  textinfo             onChange  this handleInputChange             value  this state item          gt         lt Button         onClick  this handleFormSubmit         gt    lt  Button gt         lt  form gt                export default App

User · Answer

Also after React v 16 8  you have an ability to use hooks import React   useState  from  react    const ControlledInputs        gt      const  firstName  setFirstName    useState false      const handleSubmit    e    gt        e preventDefault        if  firstName          console log  firstName   gt  gt     firstName                 return        lt  gt         lt form onSubmit  handleSubmit  gt             lt label htmlFor  quot firstName quot  gt Name   lt  label gt             lt input             type  quot text quot              id  quot firstName quot              name  quot firstName quot              value  firstName              onChange   e    gt  setFirstName e target value               gt           lt button type  quot submit quot  gt add person lt  button gt         lt  form gt       lt   gt

User · Answer

You can use input type  reset     lt form action   action page php  gt    text   lt input type  text  name  email    gt  lt br   gt       lt input type  reset  defaultValue  Reset    gt     lt  form gt

User · Answer

Let me assume that you have done the  this  binding of  sendThru  function   The below functions clears the input fields when the method is triggered   sendThru         this inputTitle value           this inputEntry value           Refs can be written as inline function expression   ref  el   gt  this inputTitle   el    where el refers to the component   When refs are written like above  React sees a different function object each time so on every update  ref will be called with null immediately before it s called with the component instance    Read more about it here

[javascript] Clear an input field with Reactjs?

Examples related to javascript

Examples related to reactjs