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

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

stephania

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

59 | 0

1 ответ

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

landen.nienow

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

@stephania

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

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

npm install axios

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

import axios from 'axios';

Создайте функцию-обработчик, которая будет вызываться при нажатии на кнопку:

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 вашего сервера.

Добавьте обработчик события onClick на кнопку:

1	<button onClick={this.handleSubmit}>Отправить</button>

Полный пример кода:

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

0 | 0

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

1 ответ

Похожие обсуждения: