Как отправить POST-запрос в Django API из веб-приложения ReactJS?

Question

Я создал очень простой Django API. Возвращает фиксированное числовое значение (только для целей тестирования):

views.py

from django.http import HttpResponse

def index(request):
    return HttpResponse(0)

У меня также есть простой интерфейс, разработанный с использованием React JS. Для разработки бэкэнда и внешнего интерфейса я использовал следующие два урока:

• ReactJS: https://mherman.org/blog/dockerizing-a-react-app/

• API-интерфейс Django Python: https://semaphoreci.com/community/tutorials/dockerizing-a-python-django-web-application

Теперь я хочу отправить запрос POST API Django из ReactJS и передать параметры name и email. Как я могу это сделать?

Это мой App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fullname: "",
      emailaddress: ""
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state);
  }

  render() {
    return (
      <div className="App">
        <header>
          <div className="container">
            <nav className="navbar">
              <div className="navbar-brand">
                <span className="navbar-item">Forms in React</span>
              </div>
            </nav>
          </div>
        </header>
        <div className="container">
          <div className="columns">
            <div className="column is-9">
              <form className="form" onSubmit={this.handleSubmit}>
                <div className="field">
                  <label className="label">Name</label>
                  <div className="control">
                    <input
                      className="input"
                      type="text"
                      name="fullname"
                      value={this.state.fullname}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <label className="label">Email</label>
                  <div className="control">
                    <input
                      className="input"
                      type="email"
                      name="emailaddress"
                      value={this.state.emailaddress}
                      onChange={this.handleChange}
                    />
                  </div>
                </div>

                <div className="field">
                  <div className="control">
                    <input
                      type="submit"
                      value="Submit"
                      className="button is-primary"
                    />
                  </div>
                </div>
              </form>
            </div>
            <div className="column is-3">
              <pre>
                <code>
                  <p>Full Name: {this.state.fullname}</p>
                  <p>Email Address: {this.state.emailaddress}</p>
                
              

); } } приложение по умолчанию для экспорта;

Answer 1

Для отправки HTTP-запросов из приложения React у вас есть два основных варианта.

Либо используйте встроенный Fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), либо что-то вроде axios (https://github.com/axios/axios).

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

onChange = (prop: any, value: string) => {
    this.setState({
      [prop]: value
    });
  };

После этого вот пример использования fetch API:

const response = fetch("endpoint_url",
            {
                method: 'POST',
                body: JSON.stringify({
                    this.state.name,
                    this.state.email
                    // Other body stuff
                }),
                headers: {
                    'X-Api-Key': API_KEY,
                    'Content-Type': 'application/json'
                    // Other possible headers
                }
            }
        );

И, наконец, вам нужно проанализировать ответ как JSON, используя const responseJson = response.json();

Это отвечает на ваш вопрос?