Javascript 在React.js中单击时设置表单提交通知的动画

我正在使用自定义联系人表单创建React应用程序。一切都正常工作，只是我不知道如何在发送消息时淡入和超时

在这里您可以看到我的代码：

const Contact=（）=>{
const[notice，setNotice]=useState（false）；
const handleSubmit=async（e）=>{
e、 预防默认值（）；
const{姓名、姓氏、电话、电子邮件、消息}=e.target.elements；
让详细信息={
name:name.value，
姓：姓。值，
phone:phone.value，
email:email.value，
message:message.value，
};
let response=等待获取（“http://localhost:5000/contact", {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json；字符集=utf-8”，
},
正文：JSON.stringify（详细信息），
});
让result=wait response.json（）；
设置通知（结果状态）；
e、 target.reset（）；
}
}

---

{notice}

您可以为此使用自定义挂钩，该挂钩使用

setTimeout

计时器在指定时间后消失。下面的示例

useNotification（）

返回用于显示消息的组件和可用于触发显示通知的回调

函数useNotification（）{
const[message，setMessage]=React.useState（null）；
//消息状态更改时运行
React.useffect（（）=>{
//如果没有消息，请不要在下面运行任何内容
如果（！message）{return；}
//启动5秒计时器，并在过期时重置消息状态
const timer=window.setTimeout（（）=>setMessage（null），5000）；
//返回的函数在卸载时运行
return（）=>{
清除超时（计时器）；
};
}，[信息]；
//调用此命令并发送消息以更新状态
//更新状态后，上面的useffect钩子中的函数将运行
函数addNotification（通知）{
设置消息（通知）；
}
//组件来显示通知消息
函数通知（）{
返回(
{message&&{message}
);
}
//返回组件以显示消息，并返回回调以触发
返回[通知，添加通知]；
}

查看下面的工作演示：

函数useNotification（）{
const[message，setMessage]=React.useState（null）；
const[messageType，setMessageType]=React.useState（'info'）；
常数延迟=5000；
React.useffect（（）=>{
如果（！message）{return；}
const timer=window.setTimeout（（）=>setMessage（null），延迟）；
return（）=>{
清除超时（计时器）；
};
}，[信息]；
函数addNotification（通知，类型='info'）{
设置消息（通知）；
setMessageType（类型）；
}
函数通知（）{
返回(
{message&&{message}
);
}
返回[通知，添加通知]；
}
函数ContactForm（{addNotification}）{
const[email，setEmail]=React.useState（'terry@site.io');
const[name，setName]=React.useState（'Terry'）；
const[message，setMessage]=React.useState（“你不喜欢React？！”）；
const[error，setError]=React.useState（false）；
函数handleSubmit（e）{
e、 预防默认值（）；
//发送消息。。。
//显示通知
如果（错误）{
addNotification（'出现问题。请重试！'，'错误'）；
}否则{
addNotification（`Thancing for your message，${name}！`success'）；
}
}
返回(
姓名：
setName（e.target.value）}
值={name}
/>
电邮：
setEmail（e.target.value）}
值={email}
/>
信息：
setMessage（e.target.value）}
值={message}
/>
setError（e.target.checked）}
/>
单击此按钮查看错误消息
发送消息
);
}
函数App（）{
const[Notification，addNotification]=useNotification（）；
返回(
);
}
ReactDOM.render（，document.getElementById（'root'））
*{
框大小：继承；
}
身体{
框大小：边框框；
颜色：#554f4f；
字体系列：无衬线；
字号：18px；
线高：1.4；
保证金：0；
}
.包装纸{
保证金：0自动；
最大宽度：400px；
填充：1rem；
}
按钮
输入，
文本区{
边框：3px实心#ccc；
边界半径：4px；
颜色：继承；
显示：块；
字体家族：继承；
字体大小：继承；
行高：继承；
保证金：0.25雷姆0.1雷姆；
填充：0.5雷姆；
宽度：100%；
}
钮扣{
背景色：#333；
边界：0；
颜色：#fff；
光标：指针；
填充：1rem；
}
.复选框{
显示器：flex；
}
输入[type=“checkbox”]{
左边距：1 em；
右边距：1rem；
转换：比例（1.5）；
宽度：自动；
}
.通知{
动画：fadein 0.3s缓进缓出；
背景色：#c8d8ff；
边界半径：4px；
盒影：0 6px 24px rgba（0,0,0,0.07）；
颜色：rgba（0,0,0,0.75）；
文本对齐：居中；
}
.通知错误{
背景色：#F9C5C5C5；
}
.通知成功{
背景色：#d9f59f；
}
.通知内容{
填充：1rem；
}
@关键帧淡入淡出{
从{
不透明度：0；
转化：translateY（-20%）；
}
到{
不透明度：1；
变换：translateY（0）；
}
}
您可以为此使用自定义挂钩，该挂钩使用
设置超时
计时器在指定时间后消失。下面的示例
useNotification（）
返回用于显示消息的组件和可用于触发显示通知的回调

函数useNotification（）{
const[message，setMessage]=React.useState（null）；
//消息状态更改时运行
React.useffect（（）=>{
//如果没有消息，请不要在下面运行任何内容
如果（！message）{return；}
//启动5秒计时器，并在过期时重置消息状态
常量计时器=window.setTimeout（）=