ReactJS'li Django Formları

Question

Eğer bu aptalca bir soru gibi gözüküyorsa özür dilerim ama bunun için çok zaman harcadım ve bunu yapmak için ideal bir yol bulamadı.

Django şablonlarını kullanarak oluşturulmuş Django formlarım var. Şimdi form alanlarından birine (ve belki de uzun vadede birden fazla alana) bir React bileşeni eklemek istiyorum.

Şimdiye kadar okuduğum bilgilere dayanarak, React rendering ile Django şablonunu karıştırmama ve Django'nun yalnızca Reaend'e JSON verisi gönderen arka uç API'sı olarak hizmet vermesinin en iyi yolu olduğu görülüyor. Bu yüzden şimdi formlarımı tamamen React yoluyla yeniden oluşturmaya çalışıyorum. Forms.py yerine, React'a gönderilmek üzere hangi verilerin gönderileceğini ve çevremde Django Rest Framework kurulumuna sahip olmak için serializers.py dosyasını oluşturdum. Şimdi bu verileri nasıl göndereceğimi anlamaya çalışıyorum. Django/DRF'yi React ile bütünleştirmekten bahseden bazı iyi çevrimiçi eğiticiler (ve SO gönderileri) vardır, ancak React ve DRF aracılığıyla uçtan uca form oluşturma için tek bir örnek buldu. Spesifik olarak, kimsenin bana gerçekten benim görüşüme ne yazacağımı bilsin ki bu, form verisini almaya çalışan React'tan gelen GET talebi için yararlı olabilir. Başlamak için bir web referansı ya da sadece geniş adımların benim için yeterli olması (ve daha çok dokümana girebilmeniz) gerekir.

Güncelleme: Ayrıca burada serializers.py kod basitleştirilmiş bir sürümünü ekleyerek:

from .models import Entity 
from rest_framework import serializers 


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

Answer 1

Öncelikle sana Çok girdili biçimleri hakkında related React documentation kontrol etmek gerek. React tarafında yapıların nasıl yapılandırılacağı hakkında temel fikir verir. Sunucudan veri alınırken Hakkında

, sen componentDidMount böyle bir şey deneyebilirsiniz:

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

Sonra böyle bir şey ile render yönteminde html giriş öğeleri oluşturabilirsiniz:

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

Ve işte buradaki submitForm yönteminiz:

Güncelleme: İşte

bir senin DRF görünümü için untested-but-should-work örnektir:

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

Ve bu görünüm için url ilgilidir: aşağı

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