Как сделать post запрос по нажатию на кнопку через функцию в react.js?

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

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

Как сделать post запрос по нажатию на кнопку через функцию в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от landen.nienow , 7 месяцев назад

@stephania 

Чтобы отправить POST запрос через функцию в React.js, необходимо использовать метод fetch или axios. Например, с помощью axios:

  1. Установите axios в ваш проект с помощью npm:


npm install axios

  1. Импортируйте библиотеку в ваш файл с функцией:


import axios from 'axios';

  1. Создайте функцию-обработчик, которая будет вызываться при нажатии на кнопку:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
handleSubmit(event) {
  event.preventDefault();
  axios.post('/api/submit-data', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}


В данном примере, при нажатии на кнопку будет отправлен POST запрос на сервер с телом в формате JSON, содержащим имя и фамилию. Замените /api/submit-data на URL вашего сервера.

  1. Добавьте обработчик события onClick на кнопку:
1
<button onClick={this.handleSubmit}>Отправить</button>


  1. Полный пример кода:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React from 'react';
import axios from 'axios';

class MyComponent extends React.Component {
  handleSubmit(event) {
    event.preventDefault();
    axios.post('/api/submit-data', {
      firstName: 'John',
      lastName: 'Doe'
    })
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  }

  render() {
    return (
      <form>
        <button onClick={this.handleSubmit}>Отправить</button>
      </form>
    );
  }
}

export default MyComponent;


Обратите внимание, что в данном примере POST запрос отправляется на URL /api/submit-data, который нужно заменить на URL вашего сервера. Также, в данном примере используется метод event.preventDefault(), чтобы предотвратить отправку формы по умолчанию при нажатии на кнопку.