framework - django react skeleton

Formas Django con ReactJS

Question

Lo siento si esto parece una pregunta tonta, pero he pasado mucho tiempo en esto y no puedo encontrar la manera ideal de hacerlo.

Tengo formularios Django renderizados usando plantillas Django. Ahora quiero agregar un componente React a uno de los campos del formulario (y quizás a más de un campo a largo plazo).

Basándome en lo que he leído hasta ahora, parece mejor no mezclar las plantillas de Django con la representación de React y hacer que Django sirva solo como API de backend enviando datos JSON a React, mientras que React se hace cargo de toda la representación de formularios. Así que ahora estoy tratando de volver a renderizar mis formularios completamente a través de React. En lugar de forms.py, ahora he creado serializers.py para definir qué datos se enviarán a React y tengo la configuración de Django Rest Framework en mi entorno. Ahora estoy tratando de averiguar cómo enviar estos datos a través de. Hay algunos buenos tutoriales en línea (y publicaciones SO) que hablan sobre la integración de Django / DRF con React, pero no han encontrado un solo ejemplo de representación de formularios de extremo a extremo a través de React y DRF. Específicamente, ¿puede alguien decirme qué es lo que realmente escribo en mi opinión que puede ser útil para la solicitud GET de React que intenta obtener los datos del formulario? Una referencia en la web o solo los amplios pasos necesarios deberían ser suficientes para que pueda comenzar (y profundizar más en los documentos).

Actualización: También agregando una versión simplificada del código serializers.py aquí:

from .models import Entity
from rest_framework import serializers


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

Answer 1

En primer lugar, creo que debe consultar la documentación relacionada con React sobre formularios con entradas múltiples. Te da una idea básica sobre cómo deberían estructurarse las cosas en el lado de Reacción.

Acerca de obtener datos del servidor, puede intentar algo como esto en 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
        });
    });
}

Luego puedes crear tus elementos de entrada html en el método de render con algo como esto:

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

Y aquí está su método submitForm :

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

Actualizar:

Aquí hay un ejemplo untested-but-should-work para su vista 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.''})

Y esta es la url relacionada para esta vista:

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