我如何将数据从 ant 设计表单发布到 Django Backed 中？

Question

i trying to post data from ant design React.js into Python Django rest frame work. so I am using method OnFinish to send data, but its not working.

MY big problem is , i don't know how can i Introduction Data i want to send them data from Form , by using React-redux or something else way , so please Help me . #react.js Form:

import React, { Component } from "react";
import {
  Form,
  Input,
  Button,
  PageHeader,
  Select,
  DatePicker,
  message,
} from "antd";
import "antd/dist/antd.css";
import { connect } from "react-redux";
import axios from "axios";

// defualt setting for django

axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.xsrfHeaderName = "X-CSRFToken";

// from layout setting
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

// end fform layout setting

// const onFinish = (values) => {
//   console.log(values);
//   axios.post("http://127.0.0.1:8000/api/create/", {
//     title: values.title,
//     manager: values.manager,
//   });
// };

// const title = event.target.elements.title.value;
// const manager = event.target.elements.manager.value;

class ExtrashiftForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Extrashifts: [],
    };
  }

  // componentDidMount() {
  //   this.fetchExtrashift();
  // }

  handleSubmit = () => {
    axios
      .post("http://127.0.0.1:8000/api/create", {
        data: {
          title: this.target.elements.title.value,
          manager: this.data.item.manager,
        },
      })
      .then((res) => {
        if (res.status == 200) message.success("data successfully updated!");
        this.fetchExtrashift();
      })
      .catch((err) => {
        message.error("data profile failed to update ...");
      });
  };

  render() {
    return (
      <div>
        <Form {...formItemLayout} name="update">
          <Form.Item label="Title :">
            <Input name="title" placeholder="Put a title here" />
          </Form.Item>
          <Form.Item label="Manager :">
            <Input name="manager" placeholder="Enter manager name" />
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button
              type="primary"
              htmlType="submit"
              onFinish={this.handleSubmit}
            >
              create
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default ExtrashiftForm;

#back end api/urls.py :

from Extrashift.api.views import ExtrashiftViewSet
from rest_framework.routers import DefaultRouter

router = DefaultRouter()
router.register(r'', ExtrashiftViewSet, basename='Extrashift')
urlpatterns = router.urls

#backend : api/views.py:

from rest_framework import viewsets
from Extrashift.models import Extrashift
from .Serializers import ExtrashiftSerializers

class ExtrashiftViewSet(viewsets.ModelViewSet):
    serializer_class = ExtrashiftSerializers
    queryset = Extrashift.objects.all()

from rest_framework import permissions
from rest_framework.generics import (
    ListAPIView,
    RetrieveAPIView,
    CreateAPIView,
    UpdateAPIView,
    DestroyAPIView
)

from my back end everything is work but Please help me to i can send only one data from this form.

if is possible please ,change my Code to the Correct code

Answer 1

Nothing spectacular here, you can read the docs

Rather than giving the name as a prop to the Input field. I've passed it as a prop to Form.Item component

You can check the example here

import React, { Component } from "react";
import {
  Form,
  Input,
  Button,
  PageHeader,
  Select,
  DatePicker,
  message,
} from "antd";
import "antd/dist/antd.css";
import axios from "axios";

// defualt setting for django

axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.xsrfHeaderName = "X-CSRFToken";

// from layout setting
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 16,
    },
  },
};

const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
};

// end fform layout setting

// const onFinish = (values) => {
//   console.log(values);
//   axios.post("http://127.0.0.1:8000/api/create/", {
//     title: values.title,
//     manager: values.manager,
//   });
// };

// const title = event.target.elements.title.value;
// const manager = event.target.elements.manager.value;

export default class ExtrashiftForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Extrashifts: [],
    };
  }

  // componentDidMount() {
  //   this.fetchExtrashift();
  // }

  handleSubmit = (values) => {
    console.log(values)
    // axios
    //   .post("http://127.0.0.1:8000/api/create", {
    //     data: {
    //       title: this.target.elements.title.value,
    //       manager: this.data.item.manager,
    //     },
    //   })
    //   .then((res) => {
    //     if (res.status == 200) message.success("data successfully updated!");
    //     this.fetchExtrashift();
    //   })
    //   .catch((err) => {
    //     message.error("data profile failed to update ...");
    //   });
  };

  render() {
    return (
      <div>
        <Form {...formItemLayout} name="update" onFinish={this.handleSubmit}>
          <Form.Item label="Title :" name="title">
            <Input placeholder="Put a title here" />
          </Form.Item>
          <Form.Item label="Manager :" name="manager">
            <Input placeholder="Enter manager name" />
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button
              type="primary"
              htmlType="submit"
            >
              create
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}