[英]Remove text from textarea after form submission React
I have a form that is sending an email once user has clicked submit but the text is still staying in the text area.一旦用户单击提交,我有一个发送 email 的表单,但文本仍保留在文本区域中。 What can I do to clear the textarea once form has been submitted?
提交表单后,我该怎么做才能清除文本区域?
import "./contact.css";
import phone from "../../img/phone.png";
import email from "../../img/email.png";
import github from "../../img/github.png";
import link from "../../img/link.png";
import resume from "../../img/resume.png";
import { useRef, useState } from "react";
import emailjs from "@emailjs/browser";
const Contact = () => {
const formRef = useRef();
const [done, setDone] = useState(false);
const handleSubmit = (event) => {
event.preventDefault();
emailjs
.sendForm(
"service_fh7vxks",
"template_z5wczcw",
formRef.current,
"mhYkqvVVsQZ1u1ogA"
)
.then(
(result) => {
console.log(result.text);
setDone(true);
},
(error) => {
console.log(error.text);
}
);
};
return (
<div className="c">
<div className="c-bg"></div>
<div className="c-wrapper">
<div className="c-left">
<h1 className="c-title">Let's talk</h1>
<div className="c-info">
<div className="c-info-item">
<img src={phone} alt="" className="c-icon" />
+61 490 522 328
</div>
<div className="c-info-item">
<img src={email} alt="" className="c-icon" />
</div>
<div className="c-info-item">
<img src={resume} alt="" className="c-icon" />
CV
</div>
<div className="c-info-item">
<img src={github} alt="" className="c-icon" />
</div>
<div className="c-info-item">
<img src={link} alt="" className="c-icon" />
linkedin.com/in/tobias-bedford
</a>
</div>
</div>
</div>
<div className="c-right">
<p className="c-description">
<b>Who are you?</b> Lorem ipsum dolor sit amet consectetur
adipisicing elit. Vel provident ex quis adipisci quidem magni hic
eos quae deleniti dignissimos sequi rerum nam atque reprehenderit
et, odio ad? Aliquam, repellat.
</p>
<form ref={formRef} onSubmit={handleSubmit}>
<input type="text" placeholder="name" name="user_name" />
<input type="text" placeholder="subject" name="user_subject" />
<input type="text" placeholder="email" name="user_email" />
<textarea rows="5" placeholder="message" name="message"></textarea>
<button>Submit</button>
{done && "Thank you..."}
</form>
</div>
</div>
</div>
);
};
export default Contact;
I believe it could be possible through using setstate(), but though there is maybe an easier way built into React.我相信这可以通过使用 setstate() 来实现,但 React 中可能内置了一种更简单的方法。 Any help would be greatly appreciated.
任何帮助将不胜感激。
Indeed, I would use useState
for this.实际上,我会为此使用
useState
。 You can save a declare the value with a default message, use an onChange
handler to update the value, then clear it after you submit the form.您可以使用默认消息保存声明值,使用
onChange
处理程序更新值,然后在提交表单后清除它。
const [done, setDone] = useState(false);
const [textMessage, setTextMessage] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
emailjs
.sendForm(
"service_fh7vxks",
"template_z5wczcw",
formRef.current,
"mhYkqvVVsQZ1u1ogA"
)
.then(
(result) => {
console.log(result.text);
setDone(true);
setTextMessage('');
},
(error) => {
console.log(error.text);
}
);
};
const handleChange = (e) => {
setTextMessage(e.target.value);
}
//...then in your form, use defaultValue and onChange:
<textarea rows="5" defaultValue={textMessage} //OR
value={textMessage} onChange={handleChange} placeholder="message" name="message"></textarea>
You may set a id for your form and reset it while submit success您可以为您的表单设置一个 id 并在提交成功时重置它
//function
const handleSubmit = (event) => {
document.getElementById('my_form').reset();
}
//form
<form id='my_form'>
{--code here --}
</form>
if only clear for textarea and other remain you may try to set id for text area and do below in your submit function如果只清除文本区域和其他内容,您可以尝试为文本区域设置 ID 并在您的提交中执行以下操作 function
//function
const handleSubmit = (event) => {
document.getElementById('textarea_id').value = '';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.