Кнопка "Отправить" обновляет страницу вместо отправки формы? (ReactJS и react-toastify)

Question

Как сказано в заголовке, у меня есть две кнопки, которые имеют одинаковый формат, но одна при нажатии обновляет страницу, а не отправляет форму. Мне просто нужно, чтобы вызвать тост.

Вот рабочая кнопка:

<button
    type="submit"
    className="btn btn-primary my-2 my-sm-0"
    style={{ marginTop: "10px" }}
    onClick={() => onSubmit()}
>
  <i className="fas fa-search"></i>
</button>

А вот и не работающая кнопка:

<button
    type="submit"
    className="btn btn-primary my-2 my-sm-0"
    style={{ marginTop: "10px" }}
    onClick={() => onSubmit()}
>
    <i className="fas fa-paper-plane"></i>
</button>

Единственное отличие состоит в том, что первый заключен в тег Link для отправки результатов поиска, а другой будет отправлять электронное письмо для подписки на информационный бюллетень, но пока он должен просто вызвать тост.

Помогите?

Кроме того, я уже пробовал event.preventDefault (не работал), и оба они находятся в одном и том же формате формы.

Answer 1

Кнопка "Не смешивать" type="submit" иonClick обработчик, поскольку он отправит связанную форму и выполнит любые действия по отправке формы по умолчанию.

Также я пробовал event.preventDefault уже (не сработало), и оба они находятся в одном и том же формате формы.

Это не сработало, потому что ваш onSubmit обратный вызов не получил объект события.

Либо измените тип на "кнопка", либо используйте onClick обработчик для отправки данных формы

<button
    type="button" // <-- button type
    className="btn btn-primary my-2 my-sm-0"
    style={{ marginTop: "10px" }}
    onClick={onSubmit}
>
  <i className="fas fa-search"></i>
</button>

Или переместите onSubmit обработчик формы от кнопки

<form onSubmit={onSubmit} ...>
  ...

  <button
      type="submit"
      className="btn btn-primary my-2 my-sm-0"
      style={{ marginTop: "10px" }}
  >
    <i className="fas fa-search"></i>
  </button>

  ...

</form>

Также нужно прикрепить onSubmit к любому элементу таким образом, чтобы он также потреблял событие, поэтому вы можете event.preventDefault() в теме.

Либо

onSubmit={e => onSubmit(e)}
onClick={e => onSubmit(e)}

или

onSubmit={onSubmit}
onClick={onSubmit}

И не забудьте позвонить event.preventDefault()

const onSubmit = e => {
  e.preventDefault();
  ...
}

Если у вас по-прежнему возникают проблемы из-за переноса ссылок, вы также можете вызвать event.stopPropgation()в обработчике, чтобы предотвратить всплытие события в DOM (в данном случае virtualDOM, потому что response использует синтетические события).