¿Cómo puedo eliminar los datos de entrada después de enviar el formulario?
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;Aquí tomé dos entradas y obtuve los datos usando OnSubmit. Ant puedo obtener los datos fácilmente. Pero quiero restablecer el valor después de enviar con el mismo botón llamado "enviar".
Entonces, para eliminar el restablecimiento del formulario, debe usar los formularios controlados. Por formularios controlados me refiero a usar los estados para cambiar las entradas de formulario. Y esa es la forma recomendada y la mejor práctica.
entonces, si tiene que volver a escribir su código, se verá así.
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;La solución fácil es restablecer el formulario de esta manera.
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(); };Y no olvide proporcionar la identificación a su formulario
<Form onSubmit={handleItemSubmit} id="form">Sin embargo, le sugiero encarecidamente que consulte la respuesta de callmeizaz anterior sobre el estado de uso. Esa es la forma correcta de manejar la forma.
restablecer el formulario de esta manera:
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 }