带有 ReactJS 的 Django 表单
Posted
技术标签:
【中文标题】带有 ReactJS 的 Django 表单【英文标题】:Django Forms with ReactJS 【发布时间】:2017-07-06 23:03:59 【问题描述】:我有使用 Django 模板呈现的 Django 表单。现在我想将 React 组件添加到其中一个表单字段(从长远来看可能会添加到多个字段)。
根据我目前所读到的内容,似乎最好不要将 Django 模板与 React 渲染混合在一起,让 Django 仅作为后端 API 将 JSON 数据发送到 React,而 React 会接管整个表单渲染。所以我现在尝试完全通过 React 重新渲染我的表单。
我现在创建了 serializers.py 而不是 forms.py 来定义要发送到 React 的数据并在我的环境中设置 Django Rest Framework。现在我想弄清楚如何发送这些数据。有一些很好的在线教程(和 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 票赞成,1 票反对。很高兴得到 cmets 的支持。我一直在寻找一个好的解决方案(以及正确的做事方式),但令人惊讶的是,我什至找不到一个通过 React 呈现的 Django 表单示例。 DRF 有一个很好的文档,但是(如果我理解正确的话)我还没有看到一个很好的表单数据发送的例子(即用户得到一个空白表单,填写它,然后提交回来——所有这些都是 Django 只作为一个后台-end API 和前端的 React 渲染)我想这应该是一个很常见的用例 【参考方案1】:首先,我认为您需要检查related React documentation 关于具有多个输入的表单。它为您提供了关于在 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.
);
更新:
这是您的 DRF 视图的 untested-but-should-work
示例:
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()),
]
【讨论】:
感谢您的回复!首先,我专门寻找如何构建我的 Django 视图。我一直在尝试遵循DRF Tutorial 中给出的示例,但它讨论了创建和更新现有模型实例等。我想在视图中编写一个 API 端点,以允许将表单字段发送到另一端,所以可以呈现空白表格供用户填写。这似乎是一个非常基本的用例,但到目前为止我找不到任何示例。 既然您使用react
来创建html 部分,为什么还需要django forms
?您可以在反应中创建空表单。而要获取值(如ModelForm
),您可以使用 api 视图 + ajax 请求。
对不起,您的意思是不将表单字段发送到 React 以呈现表单并在 React 端本身定义字段吗? (因为这会有点不干,因为我将在两个不同的地方维护表单字段?)我没有使用 Django 表单,但需要一种将表单字段发送到 React 的方法,因此 React 知道要呈现哪些字段(如果有帮助,还使用简化版本的 serializers.py 更新了问题)。感谢您尝试帮助我。
@AnupamJain 是的。如果用户已经存在,只需更新它。如果没有,请使用来自反应端的新数据作为 json 创建一个新数据!
谢谢! (如果我的问题听起来很愚蠢,请道歉。只是想了解 Django-React 世界中的一些事情)以上是关于带有 ReactJS 的 Django 表单的主要内容,如果未能解决你的问题,请参考以下文章
reactjs:使用 reactstrap ui 的带有数据时间选择器的 formik 表单示例