带有 ReactJS 的 Django 表单

IT技术 django reactjs django-rest-framework
2021-04-19 16:48:44

我有使用 Django 模板呈现的 Django 表单。现在我想将 React 组件添加到表单字段之一(从长远来看,可能会添加到多个字段)。

根据我目前所读到的内容,最好不要将 Django 模板与 React 渲染混合在一起,让 Django 仅作为后端 API 向 React 发送 JSON 数据,而 React 接管整个表单渲染。所以我现在试图完全通过 React 重新渲染我的表单。

我现在创建了 serializers.py 来定义要发送到 React 的数据,并在我的环境中设置 Django Rest Framework,而不是 forms.py。现在我想弄清楚如何发送这些数据。有一些很好的在线教程(和 SO 帖子)讨论了将 Django/DRF 与 React 集成,但还没有找到通过 React 和 DRF 进行端到端表单渲染的单个示例。具体来说,任何人都可以让我知道我在我的视图中真正写了什么,然后对来自尝试获取表单数据的 React 的 GET 请求有用吗?一个网络参考或只是所需的广泛步骤应该足以让我开始(并深入研究文档)。

更新:还在此处添加了 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
        });
    });
}

然后你可以在render方法中创建你的 html 输入元素,如下所示:

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-workDRF 视图示例:

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

这是此视图的相关网址:

urlpatterns = [
    url(r'^api/profile/(?P<pk>[0-9]+)/$', ProfileFormView.as_view()),
]
@AnupamJain 是的。如果用户已经存在,只需更新它。如果没有,请使用来自反应端的新数据作为 json 创建新数据!
2021-05-23 16:48:44
既然你是react用来创建 html 部分的,为什么还需要django forms呢?您可以在 React 中创建空表单。要获取值(如ModelForm),您可以使用 api 视图 + ajax 请求。
2021-05-29 16:48:44
谢谢!(如果我的问题听起来很愚蠢,我深表歉意。只是想了解 Django-React 世界中的一些东西)
2021-06-07 16:48:44
感谢您的答复!首先,我专门寻找如何构建我的 Django 视图。我一直在尝试遵循DRF 教程中给出的示例,但它讨论了创建和更新现有模型实例等。可以呈现表单供用户填写。这似乎是一个非常基本的用例,但到目前为止我找不到任何示例。
2021-06-09 16:48:44
抱歉,您的意思是不将表单字段发送到 React 来呈现表单并在 React 端本身定义字段吗?(因为这会有点不干,因为我将在两个不同的地方维护表单字段?)我没有使用 Django 表单,但需要一种将表单字段发送到 React 的方法,以便 React 知道要呈现哪些字段(如果有帮助,还使用简化版本的 serializers.py 更新了问题)。谢谢你试图帮助我。
2021-06-19 16:48:44