Как предотвратить дефолтную отправку формы в react.js?

Пользователь

от shirley.vonrueden , в категории: JavaScript , 7 месяцев назад

Как предотвратить дефолтную отправку формы в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от olen.shanahan , 6 месяцев назад

@shirley.vonrueden 

В React.js можно предотвратить дефолтную отправку формы, используя метод event.preventDefault().


Например, чтобы предотвратить отправку формы при нажатии на кнопку отправки (submit button), можно создать обработчик события onSubmit для формы и вызвать метод preventDefault() для объекта события (event):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
class MyForm extends React.Component {
  handleSubmit(event) {
    event.preventDefault();
    // далее можно обрабатывать данные формы или отправлять их на сервер
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* поля формы */}
        <button type="submit">Отправить</button>
      </form>
    );
  }
}


В данном примере при нажатии на кнопку отправки будет вызван метод handleSubmit, который вызовет метод preventDefault() для объекта события и остановит дефолтную отправку формы. Затем можно обработать данные формы или отправить их на сервер.