Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

352
Vistas
How to Remove the form value After Submit in React from below code?

How can I remove the Input data after submitting the form?

import React from 'react';
import { Form } from 'react-bootstrap';

const AddItem = () => {


    const handleItemSubmit = (event) => {
        event.preventDefault();
        const carName = event.target.carName.value;
        const companyName = event.target.companyName.value;
        console.log(carName, companyName);

    }
    return (
        <div className='w-50 mx-auto mt-5 py-5 d-block'>
            <Form onSubmit={handleItemSubmit}>
                <Form.Group className="mb-3" controlId="formBasicCarName">
                    <Form.Control name="carName" type="text" placeholder="Enter Car Model Name" />
                </Form.Group>

                <Form.Group className="mb-3" controlId="formBasicCompany">
                    <Form.Control name="companyName" type="text" placeholder="Enter Company Name" />
                </Form.Group>
                <button className='btn btn-primary' variant="primary" type="submit">
                    Submit
                </button>
            </Form>
        </div>
    );
};

export default AddItem;

Here I Took two input and get the data by using OnSubmit. Ant I can get the data easily. But I want to reset the value after submit with same button called "submit".

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

So, In order to remove the reset the form you should use the controlled forms. By controlled forms i mean using the states to change form inputs. And that's the recommended way and best practice.

so if you'll have to re-write your your code it'll look something like this.

    import React ,{useState} from 'react';  // import useState hook
    import { Form } from 'react-bootstrap';
    
    const AddItem = () => {
    // Initialise  Values with empty string or null;
    const [inputeVal, setInputVal] = useState({
       carName:"",
       companyName:"",
    });
    
   const handleChange = (event)=>{
   const {name, value} = event.target;
   setInputVal({...inputVal, [name]:value}) // will set the values from input field to relevant state

   }
    
   const handleItemSubmit = () => {
      // your handle submit logic goes here 

     // after submit you can reset the form by resetting the states

     setInputVal({
        carName:"",
        companyName:"",
     })
    
        }
        return (
            <div className='w-50 mx-auto mt-5 py-5 d-block'>
                <Form onSubmit={handleItemSubmit}>
                    <Form.Group className="mb-3" controlId="formBasicCarName">
                        <Form.Control onChange={handleChange} value={inputVal?.carName} name="carName" type="text" placeholder="Enter Car Model Name" />
                    </Form.Group>
    
                    <Form.Group className="mb-3" controlId="formBasicCompany">
                        <Form.Control onChange={handleChange} value={inputVal?.companyName} name="companyName" type="text" placeholder="Enter Company Name" />
                    </Form.Group>
                    <button className='btn btn-primary' variant="primary" type="submit">
                        Submit
                    </button>
                </Form>
            </div>
        );
    };
    
    export default AddItem;
about 4 years ago · Juan Pablo Isaza Denunciar

0

Easy fix is to reset the form like this.

  const handleItemSubmit = (event) => {
    event.preventDefault();
    const carName = event.target.carName.value;
    const companyName = event.target.companyName.value;
    console.log(carName, companyName);
    event.target.carName = "";
    const inputField = document.getElementById("form");
    inputField.reset();
  };

And don't forget to Provide the id to your form

<Form onSubmit={handleItemSubmit} id="form">

However, i will highly suggest you to look into callmeizaz answer above about the useState. Thats the proper way to handle form

about 4 years ago · Juan Pablo Isaza Denunciar

0

reset the form like this:

const handleItemSubmit = (event) => {
     event.preventDefault();
     const carName = event.target.carName.value;
     const companyName = event.target.companyName.value;
     console.log(carName, companyName);
     event.target.reset(); //add this line
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda