reactjs - 由于未连接表单而取消表单提交 - 控制台错误
问题描述
我在网上搜索过,但仍然找不到为什么我的表单没有提交,但它显示了前端的数据。我正在使用钩子从表单中获取数据。有没有办法获得更好或更简洁的代码行?TIA
这是我收到的控制台错误=>表单提交被取消,因为表单未连接
这是我的 AddUser.js
import {Form,FormGroup,Label,Input,Button} from 'reactstrap';
import{GlobalContext} from '../context/GlobalState';
import {Link, useHistory} from 'react-router-dom';
import {v4 as uuid} from 'uuid';
export const AddUser = () => {
const {addEmployee } = useContext(GlobalContext);
const [name, setName] = useState('');
const [nameL,setNameL] = useState('');
const [email,setEmail] = useState('');
const [contact,setContact] = useState('');
const [address,setAddress] = useState('');
const [date,setDate] = useState('');
const history= useHistory();
const onChange = (e) =>{
setName(e.target.value);
}
const onNameL = (e) =>{
setNameL(e.target.value);
}
const onEmail = (e) =>{
setEmail(e.target.value);
}
const onContact = (e) =>{
setContact(e.target.value);
}
const onAddress = (e) =>{
setAddress(e.target.value);
}
const onDate = (e) =>{
setDate(e.target.value);
}
const onSubmit= () =>{
const newEmployee = {
id: uuid(),
name,nameL,email,contact,address,date
}
addEmployee(newEmployee);
history.push('/');
}
return (
<React.Fragment>
<Form onSubmit={onSubmit}>
<FormGroup >
<Label>First Name:</Label>
<Input type="text" value= {name} onChange={onChange} placeholder="enter your First name"></Input>
<Label>Last Name:</Label>
<Input type="text"value= {nameL} onChange={onNameL} placeholder="enter your Last name"></Input>
<Label>Email:</Label>
<Input type="email"value= {email} onChange={onEmail} placeholder="Email Address"></Input>
<Label>Contact Number:</Label>
<Input type="number"value= {contact} onChange={onContact} placeholder="Contact"></Input>
<Label>Address:</Label>
<Input type="text"value= {address} onChange={onAddress} placeholder="enter your Address"></Input>
<Label>Enter Date of Employment:</Label>
<Input type="date"value= {date} onChange={onDate} placeholder="enter date employed"></Input>
</FormGroup>
<Button type="submit" className="btn btn-success">Submit</Button>
<Link to="/" className="btn btn-danger">Cancel</Link>
</Form>
</React.Fragment>
)
}
export default AddUser``
解决方案
我只是将按钮类型更改为按钮而不是提交,它可以工作
<Button type="button" onClick={onSubmit} className="btn btn-success">Submit</Button>
推荐阅读
- python - 连接相同列数但行数不同的 55 个数据场,并用零填充缺失值
- azure-devops - 如何从 Azure Devops 导出变量组
- database - Mongo 是单个集合还是多个集合?
- python - 如何让 Python ufuncs 返回大于正常浮点大小限制的浮点数?
- google-ai-platform - 如何使用 Python 从 Vertex AI 上的训练模型访问特征重要性的文本数据(值)
- html - 根据文本框的数量展开一个div
- python - 来自 crontab 与控制台的 python 脚本:打印和日志记录的顺序不同
- slack - SLACK-MODALS 自定义休假/权限批准或拒绝自定义应用程序
- vue.js - 无法读取未定义的属性(读取“toLowerCase”)
- python - Endianess - 十六进制到十进制小端。不正确的数据类型