Форма onSubmit срабатывает, даже если кнопка отправки не нажата

У меня есть раздел с разными полями и т. д., которые в основном являются просто параметрами, когда мне нужно получить данные.

Итак, в основном структура примерно такая:

<form onSubmit = {fetchData}>
   some parameter fields
</form>

Например, одним из параметров, который можно изменить, является дата, что я могу сделать, уменьшив или увеличив дату с сегодняшнего дня на один день, например:

<button onClick = {decreaseDate}>
  -
</button>
<input
  type = "number"
  max = "1"
  value = {incrementDate}
  onChange = {onChangeDate}
/>
<button onClick = {increaseDate}>
  +
</button>

куда:

const [incrementDate, setIncrementDate] = useState(0);

const increaseDate = () => {
  setIncrementDate(incrementDate + 1);
};

const decreaseDate = () => {
  setIncrementDate(incrementDate - 1);
};

const onChangeDate = ({ target }) => {
  const { value } = target;

  const attemptedParse = parseInt(value);

  if (!Object.is(NaN, attemptedParse)) {
    setIncrementDate(attemptedParse);
  }
};

Таким образом, в основном это изменяет дату для данных, которые необходимо получить, когда я нажимаю кнопку отправки:

<button type = "submit">
  Get data
</button>

Насколько я понимаю, функция fetchData вызывается только в onSubmit из form. Однако проблема в том, что всякий раз, когда я нажимаю кнопку уменьшения или увеличения, новые данные извлекаются с новым значением даты. Таким образом, вместо того, чтобы нажимать кнопку отправки, он просто автоматически извлекает новые данные. И это не предусмотрено в данном случае. Мне бы очень хотелось, чтобы он извлекал новые данные всякий раз, когда я нажимаю кнопку отправки.

Я делаю что-то не так, или...?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
15
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вот простое исправление:

    <button type = "button" onClick = {decreaseDate}>
      -
    </button>
    <input type = "number" max = "1" value = {incrementDate} onChange = {onChangeDate}/>

    <button type = "button" onClick = {increaseDate}>
      +
    </button>

дайте мне знать, если это работает.

Я даже не знаю, что сказать. Это, пожалуй, самая глупая ошибка, которую я совершил. Спасибо :)

Denver Dang 05.04.2022 10:51

Ха-ха, мы все иногда делаем это, рад, что это помогло :)

Ajeet Chauhan 05.04.2022 10:54

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