Как предотвратить дефолтную отправку формы в react.js?
Как предотвратить дефолтную отправку формы в react.js?
2 ответа
@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() для объекта события и остановит дефолтную отправку формы. Затем можно обработать данные формы или отправить их на сервер.
@shirley.vonrueden
Предотвращение дефолтной отправки формы в React.js можно выполнить несколькими способами.
- Использование метода event.preventDefault() внутри обработчика события onSubmit формы:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
handleSubmit(event) {
event.preventDefault();
// далее можно обрабатывать данные формы или отправлять их на сервер
}
render() {
return (
<form onSubmit={this.handleSubmit}>
{/* поля формы */}
<button type="submit">Отправить</button>
</form>
);
}
|
- Использование стрелочной функции для обработчика события onSubmit:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
handleSubmit = (event) => {
event.preventDefault();
// далее можно обрабатывать данные формы или отправлять их на сервер
}
render() {
return (
<form onSubmit={this.handleSubmit}>
{/* поля формы */}
<button type="submit">Отправить</button>
</form>
);
}
|
Оба способа позволяют предотвратить дефолтную отправку формы при нажатии на кнопку отправки и вывести пользовательскую логику обработки данных формы или отправки на сервер.