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

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

от stephania , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от landen.nienow , год назад

@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(), чтобы предотвратить отправку формы по умолчанию при нажатии на кнопку.

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

от marshall.cummings , 3 месяца назад

@stephania 

Дополнительно хочу уточнить, что вам нужно обязательно обработать изменение состояния компонента, чтобы отрисовать полученные данные от сервера. Например, если вы ожидаете получить данные и хотите их отобразить, установите состояние в ответе axios и используйте его для отображения на вашем компоненте.


Пример:

 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
29
30
31
32
33
34
35
import React from 'react';
import axios from 'axios';

class MyComponent extends React.Component {
  state = {
    responseData: ''
  }

  handleSubmit = (event) => {
    event.preventDefault();
    axios.post('/api/submit-data', {
      firstName: 'John',
      lastName: 'Doe'
    })
    .then((response) => {
      this.setState({ responseData: response.data });
    })
    .catch((error) => {
      console.log(error);
    });
  }

  render() {
    return (
      <div>
        <form>
          <button onClick={this.handleSubmit}>Отправить</button>
        </form>
        {this.state.responseData && <p>Ответ от сервера: {this.state.responseData}</p>}
      </div>
    );
  }
}

export default MyComponent;


В примере выше, после успешного получения ответа от сервера, данные сохраняются в стейте и отображаются на компоненте. В случае ошибки, информация выводится в консоль.