web-dev-qa-db-fra.com

Django Formulaires avec ReactJS

Désolé si cela semble être une question stupide, mais j'ai passé beaucoup de temps à ce sujet et incapable de trouver un moyen idéal de le faire.

J'ai des formulaires Django rendus à l'aide des modèles Django. Maintenant, je veux ajouter un composant React) à l'un des champs du formulaire (et peut-être à plus d'un domaine à long terme).

D'après ce que j'ai lu jusqu'à présent, il semble préférable de ne pas mélanger Django modèle avec React rendu et avoir Django servent uniquement d'API backend envoyant des données JSON à React, tandis que React prend en charge l'intégralité du rendu du formulaire. J'essaie maintenant de restituer entièrement mes formulaires via React. Au lieu de forms.py, J'ai maintenant créé serializers.py pour définir les données à envoyer à React et avoir Django Rest Framework configuré dans mon environnement. Maintenant, j'essaie de comprendre comment envoyer ces données. Il existe de bons didacticiels en ligne (et SO publications) qui parlent de l'intégration de Django/DRF avec React mais pas trouvé) un seul exemple de rendu de formulaire de bout en bout via React et DRF. Plus précisément, quelqu'un peut-il me dire ce que j'écris vraiment dans ma vue qui peut ensuite être utile pour la demande GET de React qui essaie de récupérer les données du formulaire? Une référence Web ou simplement les étapes générales nécessaires devraient suffire pour moi de commencer (et de creuser plus dans les documents).

Mise à jour: Ajout également d'une version simplifiée du code serializers.py ici:

from .models import Entity
from rest_framework import serializers


class EntitySerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Entity
        fields = ['name', 'role', 'location']
djangoreactjsdjango-rest-framework
21
Anupam

Tout d'abord, je pense que vous devez vérifier connexes React sur les formulaires avec plusieurs entrées. Cela vous donne une idée de base sur la façon dont les choses doivent être structurées en React.

À propos de la récupération des données du serveur, vous pouvez essayer quelque chose comme ceci dans 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
        });
    });
}

Ensuite, vous pouvez créer vos éléments d'entrée html dans la méthode render avec quelque chose comme ceci:

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

Et voici votre méthode submitForm:

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

Mise à jour:

Voici un untested-but-should-work exemple pour votre vue 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.'})

Et c'est l'URL associée pour cette vue:

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