Django Forms with ReactJS

Question

Przepraszam, jeśli wydaje się to głupie pytanie, ale spędziłem dużo czasu i nie mogłem znaleźć idealnego sposobu na zrobienie tego.

Mam formularze Django renderowane przy użyciu szablonów Django. Teraz chcę dodać komponent React do jednego z pól formularza (i być może do więcej niż jednego pola w dłuższej perspektywie).

W oparciu o to, co przeczytałem do tej pory, najlepiej jest nie mieszać szablonu Django z renderowaniem React, a Django służy wyłącznie jako interfejs API zaplecza wysyłającego dane JSON do React, a React przejmuje renderowanie całego formularza. Teraz próbuję ponownie renderować moje formularze poprzez React. Zamiast forms.py, stworzyłem teraz serializers.py, aby określić, jakie dane mają być wysyłane do React i mieć instalację Django Rest Framework w moim środowisku. Teraz próbuję dowiedzieć się, jak przesłać te dane. Istnieje kilka dobrych samouczków online (i postów SO), które mówią o integracji Django/DRF z Reactem, ale nie znalazły jednego przykładu renderowania formularzy od końca do końca w React i DRF. W szczególności, czy ktoś może dać mi znać, co naprawdę napisać w moim zdaniem, które mogą być przydatne dla żądania GET z React, który próbuje pobrać dane formularza? Odwołanie do Internetu lub po prostu konieczne kroki powinny wystarczyć, aby zacząć (i zagłębić się w dokumentach).

Aktualizacja: dodając również uproszczoną wersję kodu serializers.py tutaj:

from .models import Entity 
from rest_framework import serializers 


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

Answer 1

Po pierwsze, myślę, że trzeba sprawdzić related React documentation o postaciach z wieloma wejściami. To daje podstawowe wyobrażenie o tym, jak rzeczy powinny być ustrukturyzowane w React stronie.

O pobierania danych z serwera, można spróbować coś takiego w 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 
     }); 
    }); 
} 

Następnie można tworzyć html elementów wejściowych w render metody z mniej więcej tak:

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

I tutaj jest twoja submitForm metoda:

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

Aktualizacja:

Oto untested-but-should-work przykład dla widoku DRF:

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.'}) 

I to jest związane URL tego widoku:

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