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()), 
]