Django Forms с ReactJS

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

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

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

Обновление: Также добавлена ​​упрощенная версия кода serializers.py здесь:

from .models import Entity
from rest_framework import serializers


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

ОТВЕТЫ

Ответ 1

Во-первых, я думаю, вам нужно проверить соответствующую документацию по React о формах с несколькими входами. Это дает вам базовое представление о том, как вещи должны быть структурированы в стороне 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 для вашего представления 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.'})

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

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