Форма отправляется независимо от типа кнопки в React

Question

У меня простой код:

kill = e => {
// do the killing
}

save = e => {
  e.preventDefault()
  console.info(e.currentTarget)
}

render(){
  return <form onSubmit={this.save}>
    <button key={new Date().getTime()} onDoubleClick={this.kill}>Delete</button>}
    <button type="submit" key={new Date().getTime() + 100}>Save</button>
  </form>
}

Если я нажму Delete Кнопка, форма будет отправлена ​​-> Я вижу ее в консоли.

Двойной щелчок работает, но до этого save() вызывается метод.

Я обнаружил эту ошибку https://github.com/facebook/react/issues/8554 и попытался добавить уникальныйkey к каждой кнопке, но ничего не меняется.

Что мне не хватает?

Answer 1

Попробуйте дать type="button" к кнопке, которую вы не хотите отправлять.

---

Поведение кнопки по умолчанию. Возможные значения:

submit: кнопка отправляет данные формы на сервер. Это значение по умолчанию, если атрибут не указан для кнопок, связанных с a, или если атрибут имеет пустое или недопустимое значение.

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

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

Ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Answer 2

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

Установлен <button type="button" [..]на кнопке не следует отправлять форму.