Вопрос по reactjs, django-rest-framework, django – Спасибо! (и извинения, если мои вопросы звучат глупо. Просто пытаюсь познакомиться с вещами в мире Django-React)

20

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

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

Исходя из того, что я читал до сих пор, кажется, что лучше не смешивать шаблоны Django с рендерингом React, а Django служит только в качестве внутреннего API, отправляющего данные JSON в React, в то время как React берет на себя весь рендеринг формы. Поэтому сейчас я пытаюсь полностью перерисовать мои формы с помощью React. Вместо forms.py я теперь создал serializers.py, чтобы определить, какие данные следует отправлять в React, и настроить Django Rest Framework в моей среде. Сейчас я пытаюсь выяснить, как передать эти данные. Есть несколько хороших онлайн-руководств (и сообщений SO), в которых рассказывается об интеграции Django / DRF с React, но не найдено ни одного примера сквозного рендеринга форм с помощью 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 upvote и 1 down. Будем рады получить отзывы, поддержанные комментариями, пожалуйста. Я искал хорошее решение для этого (и правильный способ сделать что-то), но, к удивлению, не смог найти ни одного примера форм Django, визуализированных с помощью React. У DRF есть хорошая документация, но (если я правильно понимаю) я еще не видел хорошего примера отправки данных формы (т. Е. Пользователь получает пустую форму, заполняет ее, отправляет обратно - все с Django, только служащим в качестве поддержки). конец API и рендеринг React в интерфейсе), который, я думаю, должен быть довольно распространенным Anupam

Ваш Ответ

1   ответ
11

Во-первых, я думаю, что вам нужно проверитьсоответствующая документация 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.
    });
}

Обновить:

Вот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()),
]
Спасибо! (и извинения, если мои вопросы звучат глупо. Просто пытаюсь познакомиться с вещами в мире Django-React) Anupam
Поскольку вы используетеreact для создания HTML-части, зачем вамdjango forms больше? Вы можете создавать пустые формы просто в реакции. И чтобы получить значения (какModelForm), вы можете использовать запросы API + AJAX. alix
Извините, вы не имеете в виду отправку полей формы в React для отображения формы и определения полей на самой стороне React? (потому что это было бы немного не DRYish, так как я буду поддерживать поля формы в двух разных местах?) Я не использую формы Django, но мне нужен способ отправить поля формы в React, чтобы React знал, какие поля отображать ( также обновил вопрос с упрощенной версией serializers.py, если это вообще помогает). Спасибо за попытку помочь мне. Anupam
@AnupamJain Да. если пользователь уже существует, просто обновите его. Если нет, создайте новый с новыми данными, поступающими со стороны реакции как json! alix
Спасибо за ваш ответ! Чтобы начать, я специально ищу, как структурировать мой взгляд на Django. Я пытался следовать примеру, приведенному вDRF Tutorial но речь идет о создании и обновлении существующего экземпляра модели и т. д. Я хочу написать конечную точку API в представлении, которое позволит отправлять поля формы на другую сторону, чтобы пользователь мог заполнить пустую форму. Кажется, это очень простой вариант использования, но я пока не могу найти никаких примеров. Anupam

Похожие вопросы