javascript - 处理联系表格中的错误 - 获得正确的功能
问题描述
我已经使用 Material-ui 和 React 创建了一个表单。我的提交方法有一些问题。我正在显示一个快餐栏以通知用户提交成功,还显示一个快餐栏以提醒用户缺少必填字段。我的问题是如果用户没有填写所有字段,但经过第二次尝试最终成功。我的警报小吃栏仍在出现,但我想显示成功的小吃栏。不知道我需要在我的方法中改变什么。
submit = () => {
const {
firstName,
lastName,
email,
phone,
date,
time,
projectStages,
projectDescription,
budgets,
mainObjectives,
applicationTypes,
} = this.state
// eslint-disable-next-line max-len
if (lastName && firstName && email && phone) {
this.setState({
lastName,
firstName,
email,
phone,
date,
time,
projectStages,
projectDescription,
budgets,
mainObjectives,
applicationTypes,
})
document.getElementById('snackbar').style.display = 'block'
setTimeout(() => {
this.setState({ open: false })
}, 2000)
// eslint-disable-next-line max-len
this.saveMessage(firstName, lastName, phone, email, date, time, projectStages, projectDescription, budgets, mainObjectives, applicationTypes)
} else {
document.getElementById('snackbar').style.display = 'block'
document.getElementById('snackbar').style.backgroundColor = 'red'
document.getElementById('snackbar').textContent = 'Please fill in all required fields'
setTimeout(() => {
document.getElementById('snackbar').style.display = 'none'
}, 2000)
}
}
解决方案
在重新设置之前清除您的计时器
timer && clearTimeout(timer);
推荐阅读
- wpf - 组合框弹出窗口阻止来自应用程序其余部分的鼠标/触摸事件
- asp.net-core - 如何在控制器中解析 IHttpContextAccessor 依赖的 DbContext
- c# - 我正在尝试的这种字符串操作是否有一条线?
- optimization - 使用 StaticArrays 有效地填充矩阵中的块
- python - 复杂的查找和替换字符串
- java - 使用自制软件安装时 Flink Cluster 未启动
- java - Java-fx ant 应用程序不运行 netbeans
- html - 停止按钮移动到下面的行
- python - “Int”对象不是可下标的python
- javascript - 使用 NGXS 调用 API-data 并在 form-element 中设置