Django Forms with ReactJS

Question

Извините, если это кажется глупым вопросом, но я потратил много времени на это и не смог найти идеальный способ сделать это.

У меня есть формы Django, созданные с использованием шаблонов Django. Теперь я хочу добавить компонент React к одному из полей формы (и, возможно, к нескольким полям в долгосрочной перспективе).

Основываясь на том, что я прочитал до сих пор, его лучше всего не смешивать шаблоны Django с рендерингом React и использовать Django только как API-интерфейс, передающий данные JSON для React, тогда как React берет на себя всю визуализацию формы. Поэтому я теперь пытаюсь полностью переделать свои формы через React. Вместо forms.py теперь я создал serializers.py, чтобы определить, какие данные должны быть отправлены в React, и установить Django Rest Framework в моей среде. Теперь я пытаюсь понять, как отправить эти данные. Есть несколько хороших онлайн-руководств (и сообщений SO), в которых рассказывается об интеграции Django/DRF с React, но havent нашел один пример сквозной визуализации формы через React и DRF. В частности, может ли кто-нибудь сообщить мне, что я действительно пишу в своем представлении, который тогда может быть полезен для запроса GET из React, который пытается получить данные формы? Для того, чтобы я начал работать (и копаться больше в документах), мне достаточно веб-справки или просто широких шагов.

Update: добавив также упрощенную версию 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 
     }); 
    }); 
} 

Тогда вы можете создать HTML элементы ввода в render методе что-то вроде этого:

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

Update:

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

И это связано с URL для этого вида:

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