我正在使用React创建一个表单,它将向MongoDB发送POST,当我开始尝试填写表单时,我得到以下错误:
e.preventDefault is not a function
TypeError:e.preventDefault不是handleChange处的函数
这是代码(以总结的形式),这是handleChange和handleSubmit:
const handleChange = (e) => {
e.preventDefault();
setProject({ ...project, [e.target.name]: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
const res = await fetch("http://localhost:5001/client/projects", {
method: "POST",
body: JSON.stringify(project),
headers: { "Content-Type": "application/json" },
});
const data = await res.json(project);
console.log(data);
console.log(project);
};
这里是表单的一小部分:
<form onSubmit={handleSubmit}>
<Box width="50%">
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
id="project_start"
name="project_start"
value={project.project_start}
onChange={handleChange}
slotProps={{
textField: {
size: "small",
margin: "dense",
},
}}
/>
<DatePicker
id="project_end"
name="project_end"
value={project.project_end}
onChange={handleChange}
renderValue={(selected) => {
return [{ selected }];
}}
slotProps={{
textField: { size: "small", margin: "dense" },
}}
/>
</LocalizationProvider>
<TextField id="nombreP" margin="dense" size="small" />
<FormControl size="small" sx={{ m: 1 }}>
<Select
id="encargadoP"
multiple
name="usersId"
value={project.usersId}
onChange={handleChange}
MenuProps={MenuProps}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
)}
sx={{ width: 205 }}
>
{data?.map(({ _id, name }) => (
<MenuItem key={_id} value={name}>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
</Box>
<Button
type="submit"
variant={"outlined"}
size={"large"}
sx={{
width: 420,
border: "1px solid white",
m: "3rem 0 0 0",
color: "white",
borderRadius: "30px",
}}
>
Agregar proyecto
</Button>
</Box>
</form>
非常感谢所有能帮助我的人:)
1条答案
按热度按时间v8wbuo2f1#
调用MUI的
DatePicker
的onChange
回调时,第一个参数是新值,而不是事件对象。因此,您的代码应该更改为如下内容: