如何将数据从蚂蚁设计表单发布到Django支持中？

问题描述

我试图将 ant design React.js中的数据发布到Python Django其余框架中。 因此我正在使用方法 OnFinish 发送数据，但无法正常工作。

我的最大问题是，我不知道我该如何使用React-redux或其他方法从Form数据中发送数据，所以请帮助我。 ＃react.js表单：

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,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;

＃后端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
)

从我的后端开始，一切正常，但请帮助我，我只能从此表单发送一个数据。

如果可以，请将我的代码更改为正确的代码

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）