Реакция - Предотвращение подачи формы

Я экспериментировал с React. В моем эксперименте я использую Reactstrap framework. Когда я нажимаю кнопку, я заметил, что форма HTML отправляется. Есть ли способ предотвратить отправку формы при нажатии кнопки?

Я воссоздал свою проблему здесь. Моя форма довольно проста и выглядит следующим образом:

<Form>
  <h3>Buttons</h3> 
  <p>
    <Button color="primary" onClick={this.onTestClick}>primary</Button>&nbsp;
  </p>
</Form>

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

Ответы

Ответ 1

Я думаю, сначала стоит отметить, что без javascript (plain html) элемент form отправляется при нажатии <input type="submit" value="submit form"> или <button>submits form too</button>. В javascript вы можете предотвратить это с помощью обработчика события и вызова e.preventDefault() при нажатии кнопки или в форме submit. e - это объект события, переданный в обработчик события. При реагировании два релевантных обработчика событий доступны через форму onSubmit, а другая - на кнопке onClick.

Пример: http://jsbin.com/vowuley/edit?html,js,console,output

Ответ 2

Нет необходимости в JS... Просто добавьте атрибут type к кнопке со значением button

<Button type="button" color="primary" onClick={this.onTestClick}>primary</Button>&nbsp;

По умолчанию элементы кнопки имеют тип "submit", который заставляет их отправлять свой закрытый элемент формы (если есть). Изменение type на "button" предотвращает это.

Ответ 3

preventDefault - это то, что вы ищете. Чтобы просто заблокировать кнопку отправки

<Button onClick={this.onClickButton} ...

код

onClickButton (event) {
  event.preventDefault();
}

Если у вас есть форма, которую вы хотите обрабатывать по-своему, вы можете захватить событие более высокого уровня onSubmit, которое также остановит эту кнопку от отправки.

<form onSubmit={this.onSubmit}>

и выше в коде

onSubmit (event) {
  event.preventDefault();

  // custom form handling here
}

Ответ 4

2 способа

Сначала мы передаем событие в аргументе прямо в onClick.

  onTestClick(e) {
    e.preventDefault();
    alert('here');
  }

  // Look here we pass the args in the onClick
  <Button color="primary" onClick={e => this.onTestClick(e)}>primary</Button>&nbsp;

Во-вторых, мы передаем его в аргумент, и мы сделали это прямо в onClick

  onTestClick() {
    alert('here');
  }

  // Here we did right inside the onClick, but this is the best way
  <Button color="primary" onClick={e => (e.preventDefault(), this.onTestClick())}>primary</Button>&nbsp;

Надеюсь, что это поможет

Ответ 5

В вашей функции onTestClick передайте аргумент события и вызовите preventDefault() на нем.

function onTestClick(e) {
    e.preventDefault();
}

Ответ 6

function onTestClick(evt) {
  evt.stopPropagation();
}

Ответ 7

Вы предотвратите действие по умолчанию для события и возвратите false из функции.

function onTestClick(e) {
    e.preventDefault();
    return false;
}

Ответ 8

Убедитесь, что вы поместили атрибут onSubmit в форму, а не кнопку, если у вас есть от.

<form onSubmit={e => {e.preventDefault();}}>
    <button onClick={this.handleClick}>Click Me</button>
</form>

Обязательно измените функцию onClick для кнопки на свою пользовательскую функцию.

Ответ 9

componentDidUpdate(){               
    $(".wpcf7-submit").click( function(event) {
        event.preventDefault();
    })
}

Вы можете использовать componentDidUpdate и event.preventDefault(), чтобы отключить отправку формы. As response не поддерживает return false.