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

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

stephania

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

60 | 0

2 ответа

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

landen.nienow

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

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

1 | 0

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

marshall.cummings

от marshall.cummings , 2 года назад

@stephania

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

Пример:

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;

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

0 | 0

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

2 ответа

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