E.preventDefault не является функцией (React)

Я использую 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>

Я очень благодарна всем, кто может мне помочь :)

Куда/как вы звоните handleSubmit? Что такое e? Кроме того, трассировка стека идентифицирует функцию с именем handleChangeEvent. Где это?

David 10.04.2023 21:53

в onSubmit формы: <form onSubmit = {handleSubmit}>. Я не вставил код с handleChangeEvent, извините. Я добавил это к вопросу

Valentina Loaiza 10.04.2023 21:58

Я не могу воспроизвести проблему . Можете ли вы предоставить работающий минимально воспроизводимый пример, который демонстрирует проблему? Я подозреваю, что вы допустили ошибку или ложное предположение при отладке. Ошибка происходит в handleSubmit или в handleChangeEvent? Трассировка стека говорит одно, вы говорите другое. Если проблема в handleChangeEvent, то как эта функция называется и что такое e? Пожалуйста, убедитесь, что вы демонстрируете проблему, прежде чем спрашивать.

David 10.04.2023 22:01

Как называется handleChangeEvent?

Konrad 10.04.2023 22:02

@ Дэвид, я оставил часть кода в вопросе

Valentina Loaiza 10.04.2023 22:19

@Konrad handleChangeEvent находится в каждом из входных данных формы

Valentina Loaiza 10.04.2023 22:20

Что это DatePicker? Это из библиотеки? Почему вы хотите предотвратить событие изменения по умолчанию?

Konrad 10.04.2023 22:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
7
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обратный вызов 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)

Konrad 10.04.2023 22:32

Большое спасибо за ваш ответ <3, но у меня есть еще одно сомнение, в случае с Select, что бы я имел в onChange? Единственный Select, который является множественным, - это один в коде, которым я поделился, другие Selects, которые у меня есть, должны выбрать один вариант.

Valentina Loaiza 10.04.2023 22:42

@ValentinaLoaiza Для Select вы получаете объект события, так что это будет: onChange = {e => handleChangeEvent('usersId', typeof e.target.value === 'string' ? e.target.value.split(',') : e.target.value)}. Разделенная часть необходима только для множественного выбора.

Unmitigated 10.04.2023 22:46

спасибо большое, ты лучший <3

Valentina Loaiza 10.04.2023 22:50

@Unmitigated Извините, что беспокою вас сейчас, но TextField больше не показывает мне текст, который я печатаю, должен ли я использовать другой handleChangeEvent? :c Я был бы очень признателен, если бы вы могли мне помочь.

Valentina Loaiza 12.04.2023 16:33

Другие вопросы по теме