Estoy tratando de crear una función de evento onChange genérica que pueda establecer dinámicamente el estado en función de la propiedad event.name pasada. Actualmente, cada vez que escribo algo en el campo de amount , lo toma como una cadena. ¿Hay alguna forma de hacer esto?
Código de muestra
const [formState, setFormState] = useState<{title: string, amount: number, date: Date}>({ title: '', amount: 0.01, date: new Date(Date.now()), }); // should be able to handle the types I have declared const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => { const { name, value } = e.target; setFormState((prevState) => { return { ...prevState, [name]: value, } }); } return ( <form onSubmit={submitHandler}> <div className="new-expense__controls"> <div className="new-expense__control"> <label>Title</label> <input type="text" name="title" onChange={inputChangeHandler} value={formState.title}></input> </div> <div className="new-expense__control"> <label>Amount</label> <input type="number" min="0.01" step="0.01" name="amount" onChange={inputChangeHandler} value={formState.amount}></input> </div> <div className="new-expense__control"> <label>Date</label> <input type="date" min="2019-01-01" step="2022-12-31" name="date" onChange={inputChangeHandler} value={formState.date.toISOString().split('T')[0]}></input> </div> </div> <div className="new-expense__actions"> <button type="submit">Add Expense</button> </div> </form> );¡Usando JSON.parse() puedes hacer eso! muestra el código a continuación, ¡te ayudará!
const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => { let { name, value } = e.target; if (name == 'amount') { value = JSON.parse(value); } setFormState((prevState) => { return { ...prevState, [name]: value, } }); }parseFloat le dará un número flotante de cadena, por ejemplo:
parseFloat("2.15") devolverá 2.15
En tu código:
const inputChangeHandler = (e) => { let { name, value } = e.target; if (name == 'amount') { value = JSON.parse(value); } setFormState((prevState) => { return { ...prevState, [name]: value, } }); }Fuente:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/parseFloat