Soy nuevo en Reactjs y recién ahora comencé con los formularios de enlace bidireccional de React. He codificado un formulario, quería que el formulario se aclarara después
envío.
Incluso después de la presentación, no se aclara.
Por favor, señale el error en el código.
También verifique si he implementado el enlace bidireccional correctamente.
Corrígeme si estoy equivocado.
ExpenseForm.js
import React, { useState } from "react"; const ExpenseForm = () => { const [userInput, setuserInput] = useState({enteredTitle : '' , enteredAmount : '',enteredDate : ''}); const TitleChangeHandler = (event) => { setuserInput((prevState) => { return { ...prevState, enteredTitle: event.target.value }; }); }; const AmountChangeHandler = (event) => { setuserInput((prevState) => { return { ...prevState, enteredAmount: event.target.value }; }); }; const DateChangeHandler = (event) => { setuserInput((prevState) => { return { ...prevState, enteredDate: event.target.value }; }); }; const submitHandler = (event) => { event.preventDefault(); const expenseData = { title: userInput.enteredTitle, amount: userInput.enteredAmount, date: new Date(userInput.enteredDate), }; console.log(expenseData); setuserInput({enteredTitle : '' , enteredAmount : '',enteredDate : ''}) console.log(expenseData); }; return ( <form onSubmit={submitHandler}> <div className="new-expense__controls"> <div className="new-expense__control"> <label>Title</label> <input type="text" value={setuserInput.enteredTitle} onChange={TitleChangeHandler} /> </div> <div className="new-expense__control"> <label>Amount</label> <input type="number" value={setuserInput.enteredAmount} onChange={AmountChangeHandler} min="0.01" stepmin="0.01" /> </div> <div className="new-expense__control"> <label>Date</label> <input type="date" value={setuserInput.enteredDate} onChange={DateChangeHandler} min="2019-01-01" max="2022-12-31" /> </div> <div className="new-expense__actions"> <button type="submit">Submit</button> </div> </div> </form> ); }; export default ExpenseForm;No sé qué es el enlace bidireccional y no estoy muy seguro de por qué sus entradas no se restablecen, generalmente cuando restablece el valor de la entrada, cambia. Pero puede llamar a event.target.reset() al final de su controlador de envío para restablecer el formulario. Además, puede refactorizar su código para tener solo un onChangeHandler asignando cada entrada con un atributo de nombre y luego usando ese nombre dentro de onChangeHandler para dictar la clave en el objeto 'userInput':
const ExpenseForm = () => { const [userInput, setuserInput] = useState({ enteredTitle: "", enteredAmount: "", enteredDate: "" }); const onChangeHandler = (event) => { setuserInput((prevState) => { return { ...prevState, [event.target.name]: event.target.value }; }); }; const submitHandler = (event) => { event.preventDefault(); const expenseData = { title: userInput.enteredTitle, amount: userInput.enteredAmount, date: new Date(userInput.enteredDate) }; console.log(expenseData); setuserInput({ enteredTitle: "", enteredAmount: "", enteredDate: "" }); console.log(expenseData); event.target.reset(); }; return ( <form onSubmit={submitHandler}> <div className="new-expense__controls"> <div className="new-expense__control"> <label>Title</label> <input name="enteredTitle" type="text" value={setuserInput.enteredTitle} onChange={onChangeHandler} /> </div> <div className="new-expense__control"> <label>Amount</label> <input name="enteredAmount" type="number" value={setuserInput.enteredAmount} onChange={onChangeHandler} min="0.01" stepmin="0.01" /> </div> <div className="new-expense__control"> <label>Date</label> <input name="enteredDate" type="date" value={setuserInput.enteredDate} onChange={onChangeHandler} min="2019-01-01" max="2022-12-31" /> </div> <div className="new-expense__actions"> <button type="submit">Submit</button> </div> </div> </form> ); }; export default ExpenseForm;