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

如何解决如何将数据从蚂蚁设计表单发布到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
)

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

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

解决方法

这里没什么特别的，您可以read the docs

不要在g.addV('node').as('1').property(single,'data',22). addV('node').as('2').property(single,16). addV('root').as('3').property(single,9). addV('node').as('4').property(single,5). addV('node').as('5').property(single,2). addV('node').as('6').property(single,11). addV('node').as('7').property(single,15). addV('node').as('8').property(single,10). addV('node').as('9').property(single,1). addV('node').as('10').property(single,8). addE('left').from('1').to('2'). addE('left').from('3').to('4'). addE('right').from('3').to('6'). addE('left').from('4').to('5'). addE('right').from('4').to('10'). addE('left').from('5').to('9'). addE('left').from('6').to('8'). addE('right').from('6').to('7'). addE('right').from('7').to('1') 字段中使用名称prop。 我已将其作为对Input组件的支持

您可以检查example here

Form.Item