ReangoJS

Question

के साथ Django फॉर्म क्षमा करें अगर यह एक बेवकूफ सवाल की तरह लगता है लेकिन मैंने इस पर बहुत समय बिताया है और ऐसा करने के लिए एक आदर्श तरीका जानने में असमर्थ है।

मेरे पास Django टेम्पलेट्स का उपयोग करके Django रूपों को प्रस्तुत किया गया है। अब मैं फॉर्म फ़ील्ड में से एक (और शायद लंबी अवधि में एक से अधिक फ़ील्ड) में एक प्रतिक्रिया घटक जोड़ना चाहता हूं।

जो मैंने अभी तक पढ़ा है उसके आधार पर, ऐसा लगता है कि रिएक्ट प्रतिपादन के साथ डीजेगो टेम्पलेटिंग को मिश्रण नहीं करना सबसे अच्छा लगता है और Django केवल जेएसओएन डेटा को प्रतिक्रिया देने के लिए बैकएंड एपीआई के रूप में सेवा करता है, जबकि पूरे फॉर्म प्रतिपादन पर प्रतिक्रिया होती है। तो अब मैं पूरी तरह से प्रतिक्रिया के माध्यम से अपने रूपों को फिर से प्रस्तुत करने की कोशिश कर रहा हूं। Form.py के बजाय, अब मैंने यह निर्धारित करने के लिए serializers.py बनाया है कि प्रतिक्रिया के लिए कौन सा डेटा भेजा जाना है और मेरे पर्यावरण में Django Rest Framework सेटअप है। अब मैं यह आंकड़ा समझने की कोशिश कर रहा हूं कि इस डेटा को कैसे भेजना है। कुछ अच्छे ऑनलाइन ट्यूटोरियल (और एसओ पोस्ट) हैं जो रिएक्ट के साथ डीजेगो/डीआरएफ को एकीकृत करने के बारे में बात करते हैं लेकिन रिएक्ट और डीआरएफ के माध्यम से एंड-टू-एंड फॉर्म प्रतिपादन का एक उदाहरण मिला है। विशेष रूप से, क्या कोई मुझे बता सकता है कि मैं वास्तव में अपने विचार में क्या लिखता हूं जो फिर प्रतिक्रिया से प्राप्त अनुरोध के लिए उपयोगी हो सकता है जो फ़ॉर्म डेटा लाने की कोशिश करता है? एक वेब संदर्भ या केवल आवश्यक व्यापक कदम मेरे लिए शुरू होना चाहिए (और दस्तावेज़ों में अधिक खोदने के लिए)।

अद्यतन: इसके अलावा 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 जांच करने की आवश्यकता है। यह आपको आधारभूत विचार देता है कि प्रतिक्रिया पक्ष में चीजों को कैसे संरचित किया जाना चाहिए।

सर्वर से डेटा प्राप्त करने में बारे में, आप 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. 
    }); 
} 

अद्यतन:

यहाँ अपने डीआरएफ दृश्य के लिए एक 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()), 
]