tiene ese problema al restablecer los valores de los campos de entrada en el formulario. y quería preguntar si alguien conoce una forma mejor de hacerlo en lugar de simplemente hacer 'useState' para cada campo...
const handleSubmit = (e) => { e.preventDefault(); emailjs.sendForm('sample_id', 'someother_id', formRef.current, 'user_is') .then((result) => { console.log(result.text); }, (error) => { console.log(error.text); }); setMessage(true); setEmail(""); setName(""); setSubject(""); setTextarea(""); }; return ( <div className="contact" id="contact"> <div className="left"> <img src="" alt="" /> </div> <div className="right"> <h2>Kontakt</h2> <form ref={formRef} onSubmit={handleSubmit}> <label>Name</label> <input onChange={(e) => setName(e.target.value)} type="text" placeholder="Name" name="user_name" value={name} /> <label>Email</label> <input onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Email" name="user_email" value={email} /> <label>Betreff</label> <input onChange={(e) => setSubject(e.target.value)} type="text" placeholder="Subject" name="user_subject" value={subject} /> <label>Nachricht</label> <textarea onChange={(e) => setTextarea(e.target.value)} placeholder="Message" name="message" value={textarea} /> <button type="submit">Send</button> {message && <span>Thanks we will respond ASAP.</span>} </form> </div> </div> ) }Podría usar un solo estado para todos los valores del formulario (algo así como lo hicimos antes de los componentes funcionales)
// this could be outside your component const initialState = { email: "", name: "", subject: "", textArea: ""}; // declaring your state const [formState, setFormState] = React.useState(initialState);y entonces
const handleSubmit = (e) => { e.preventDefault(); emailjs.sendForm('sample_id', 'someother_id', formRef.current, 'user_is') .then((result) => { console.log(result.text); }, (error) => { console.log(error.text); }); setMessage(true); setFormState(initialState) };También tendría que volver a escribir sus controladores de entrada. Como eso :
<input onChange={(e) => setFormState({...formState, name: e.target.value})} type="text" placeholder="Name" name="user_name" value={name} />