Я использую React для создания формы, которая будет отправлять POST в MongoDB, и происходит следующее: когда я пытаюсь заполнить форму, я получаю следующую ошибку:
e.preventDefault is not a function
TypeError: e.preventDefault не является функцией в handleChangeEvent
это код (в обобщенном виде), это handleChangeEvent и handleSubmit:
const handleChangeEvent = (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.info(data);
console.info(project);
};
а вот небольшая часть формы:
<form onSubmit = {handleSubmit}>
<Box width = "50%">
<LocalizationProvider dateAdapter = {AdapterDayjs}>
<DatePicker
id = "project_start"
name = "project_start"
value = {project.project_start}
onChange = {handleChangeEvent}
slotProps = {{
textField: {
size: "small",
margin: "dense",
},
}}
/>
<DatePicker
id = "project_end"
name = "project_end"
value = {project.project_end}
onChange = {handleChangeEvent}
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 = {handleChangeEvent}
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>
Я очень благодарна всем, кто может мне помочь :)
в onSubmit формы: <form onSubmit = {handleSubmit}>. Я не вставил код с handleChangeEvent, извините. Я добавил это к вопросу
Я не могу воспроизвести проблему . Можете ли вы предоставить работающий минимально воспроизводимый пример, который демонстрирует проблему? Я подозреваю, что вы допустили ошибку или ложное предположение при отладке. Ошибка происходит в handleSubmit или в handleChangeEvent? Трассировка стека говорит одно, вы говорите другое. Если проблема в handleChangeEvent, то как эта функция называется и что такое e? Пожалуйста, убедитесь, что вы демонстрируете проблему, прежде чем спрашивать.
Как называется handleChangeEvent?
@ Дэвид, я оставил часть кода в вопросе
@Konrad handleChangeEvent находится в каждом из входных данных формы
Что это DatePicker? Это из библиотеки? Почему вы хотите предотвратить событие изменения по умолчанию?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Обратный вызов onChange для MUI DatePicker вызывается с новым значением в качестве первого аргумента, а не с объектом события.
Таким образом, ваш код должен быть изменен на что-то вроде этого:
const handleChangeEvent = (name, newVal) => {
setProject({ ...project, [name]: newVal });
};
<DatePicker id = "project_start" name = "project_start" value = {project.project_start}
onChange = {handleChangeEvent.bind(null, 'project_start')}/>
{ /* and so on for the other DatePickers ... */ }
Альтернативно: value => handleChangeEvent('project_start', value)
Большое спасибо за ваш ответ <3, но у меня есть еще одно сомнение, в случае с Select, что бы я имел в onChange? Единственный Select, который является множественным, - это один в коде, которым я поделился, другие Selects, которые у меня есть, должны выбрать один вариант.
@ValentinaLoaiza Для Select вы получаете объект события, так что это будет: onChange = {e => handleChangeEvent('usersId', typeof e.target.value === 'string' ? e.target.value.split(',') : e.target.value)}. Разделенная часть необходима только для множественного выбора.
спасибо большое, ты лучший <3
@Unmitigated Извините, что беспокою вас сейчас, но TextField больше не показывает мне текст, который я печатаю, должен ли я использовать другой handleChangeEvent? :c Я был бы очень признателен, если бы вы могли мне помочь.
Куда/как вы звоните
handleSubmit? Что такоеe? Кроме того, трассировка стека идентифицирует функцию с именемhandleChangeEvent. Где это?