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

Question

我试图将来自ant design React.js 的数据发布到 Python Django rest 框架中。 所以我使用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,
    },
    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;

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

从我的后端一切正常，但请帮助我，我只能从这个表格发送一个数据。

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

Answer 1

这里没什么特别的，你可以阅读文档

而不是将名称作为Input字段的prop 。 我已将它作为道具传递给Form.Item组件

您可以在此处查看示例

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>
    );
  }
}