reactjs - 带ReactJS的Django 窗体

  显示原文与译文双语对照的内容

对不起,如果这看起来是一个笨重的问题,但我花了很多时间来解决这个问题。

我使用 Django 模板呈现了 Django 表单。 现在,我想向一个表单字段( 可能在长期内不止一个领域) 中添加一个响应组件。

基于目前我看到的,最好不要将 Django 模板混合在一起,而且 Django 只作为后端API发送。 所以我现在正尝试通过React来呈现我的形式。 在我现在创建的环境中,我创建了来定义要发送哪些数据,并在我的环境中设置 Django Rest框架。 现在我想知道如何将这些数据发送到。 有一些很好的在线教程( 所以) 讨论集成 Django/DRF,但没有找到通过React和DRF来呈现end-to-end表单呈现的单个示例。 具体来说,任何人都可以让我知道我在视图中真正写的是什么,那对于获取表单数据的请求非常有用。 web引用或者仅仅需要的广泛步骤应该足以让我开始( 然后再深入到文档中) 。

更新:在这里还添加了 serializers.py 代码的简化版本:


from. models import Entity


from rest_framework import serializers



class EntitySerializer(serializers.HyperlinkedModelSerializer):


 class Meta:


 model = Entity


 fields = ['name', 'role', 'location']



时间: 作者:

首先,我认为你需要检查相关的响应文档( 关于具有多个输入的表单) 。 它为你提供了如何在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.'})



这是这里视图的相关 url:


urlpatterns = [


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


]



作者:
...