如何解决在函数内的onSubmit之后添加警报 替代方法:
我在致电onSubmit之后尝试添加警报。正如您在下面的函数中看到的那样,我添加了警报,但是单击我的提交按钮后该警报不会显示。仅使用常规的“警报”功能就可以很好地工作(我在下面进行了注释),但是我想对警报进行样式设置/个性化设置,因此为什么要以这种方式添加警报。我想念什么? TIA为您提供帮助。
function sendEmail(e) {
e.preventDefault();
emailjs.sendForm('hidden','hidden',e.target,'hidden')
.then((result) => {
return(
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Great,your message has been sent.
</div>
)
// alert("Great,your request has been sent!");
},(error) => {
alert("Oops,something went wrong. Please try again")
});
e.target.reset();
}
解决方法
您不能仅从onClick处理程序内部的任何函数返回jsx。您必须将代码包含在组件的return ()
中(如果使用的是基于类的组件,则必须包含render())。
替代方法:
添加状态变量以显示警报
const [alertVisibility,setAlertVisibility ] = useState(false)
并在您的onClick内
.then((result) => {
setAlertVisibility(true);
}
并在您的渲染函数中添加它。
{
alertVisibility &&
<div class="alert">
<span class="closebtn"
Great,your message has been sent.
</div>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。