Django表格与ReactJS

Question

对不起，如果这看起来像一个愚蠢的问题，但我花了很多时间在这个，无法找出一个理想的方式来做到这一点。

我有使用Django模板呈现的Django表单。现在，我想将一个React组件添加到其中一个表单字段（也可能是长期的多个字段）。

根据我目前阅读的内容，似乎最好不要将Django模板与React渲染混合在一起，并让Django仅作为将JSON数据发送到React的后端API，而React将接管整个表单渲染。所以我现在试图通过React完全重新渲染我的表格。现在我已经创建了serializers.py来定义将数据发送到React并在我的环境中设置Django Rest Framework，而不是forms.py。现在我正试图弄清楚如何发送这些数据。有一些很好的在线教程（和SO帖子）讨论了如何将Django/DRF与React集成，但没有找到通过React和DRF进行端到端表单呈现的单个示例。具体而言，任何人都可以让我知道我真的在我的视图中写了什么，然后可以用于从React尝试获取表单数据的GET请求？ Web引用或仅仅需要的广泛步骤应该足以让我开始使用（并且深入挖掘文档）。

更新： 还增加了这里的serializers.py代码的简化版本：

from .models import Entity 
from rest_framework import serializers 


class EntitySerializer(serializers.HyperlinkedModelSerializer): 
    class Meta: 
     model = Entity 
     fields = ['name', 'role', 'location'] 

Answer 1

首先，我认为你需要检查related React documentation大约有多个输入形式。它为您提供了有关如何在React方面构建事物的基本想法。

关于从服务器获取数据，你可以尝试这样的事情在componentDidMount：

componentDidMount() { 
    // Assuming you are using jQuery, 
    // if not, try fetch(). 
    // Note that 2 is hardcoded, get your user id from 
    // URL or session or somewhere else. 
    $.get('/api/profile/2/', (data) => { 
     this.setState({ 
      formFields: data.fields // fields is an array 
     }); 
    }); 
} 

然后你就可以像这样的东西创建render方法您的HTML输入元素：

render() { 
    let fields = this.state.formFields.map((field) => { 
     return (
      <input type="text" value={field.value} onChange={(newValue) => {/* update your state here with new value */ }} name={field.name}/> 
     ) 
    }); 
    return (
     <div className="container"> 
      <form action=""> 
       {fields} 
       <button onClick={this.submitForm.bind(this)}>Save</button> 
      </form> 
     </div> 
    ) 
} 

而且这里是你的submitForm方法：

submitForm() { 
    $.post('/api/profile/2/', {/* put your updated fields' data here */}, (response) => { 
     // check if things done successfully. 
    }); 
} 

更新：

这里是您的DRF视图中untested-but-should-work例如：

from rest_framework.decorators import api_view 
from django.http import JsonResponse 
from rest_framework.views import APIView 


class ProfileFormView(APIView): 
    # Assume you have a model named UserProfile 
    # And a serializer for that model named UserSerializer 
    # This is the view to let users update their profile info. 
    # Like E-Mail, Birth Date etc. 

    def get_object(self, pk): 
     try: 
      return UserProfile.objects.get(pk=pk) 
     except: 
      return None 

    # this method will be called when your request is GET 
    # we will use this to fetch field names and values while creating our form on React side 
    def get(self, request, pk, format=None): 
     user = self.get_object(pk) 
     if not user: 
      return JsonResponse({'status': 0, 'message': 'User with this id not found'}) 

     # You have a serializer that you specified which fields should be available in fo 
     serializer = UserSerializer(user) 
     # And here we send it those fields to our react component as json 
     # Check this json data on React side, parse it, render it as form. 
     return JsonResponse(serializer.data, safe=False) 

    # this method will be used when user try to update or save their profile 
    # for POST requests. 
    def post(self, request, pk, format=None): 
     try: 
      user = self.get_object(pk) 
     except: 
      return JsonResponse({'status': 0, 'message': 'User with this id not found'}) 

     e_mail = request.data.get("email", None) 
     birth_date = request.data.get('birth_date', None) 
     job = request.data.get('job', None) 

     user.email = e_mail 
     user.birth_date = birth_date 
     user.job = job 

     try: 
      user.save() 
      return JsonResponse({'status': 1, 'message': 'Your profile updated successfully!'}) 
     except: 
      return JsonResponse({'status': 0, 'message': 'There was something wrong while updating your profile.'}) 

，这是对这一观点的相关网址：

urlpatterns = [ 
    url(r'^api/profile/(?P<pk>[0-9]+)/$', ProfileFormView.as_view()), 
]