Django Forms with ReactJS

Question

申し訳ありませんが、これは間違った質問のようですが、私はこれに多くの時間を費やしており、これを行うには理想的な方法を見つけることができません。

私はDjangoのテンプレートを使ってレンダリングされたDjangoのフォームを持っています。今では、Reactコンポーネントをフォームフィールドの1つに（そして恐らく長期的には複数のフィールドに）追加したいと思います。

私がこれまで読んだところでは、DjangoのテンプレートとReactレンダリングを混在させないようにして、DjangoはJSONデータをReactに送るだけで、Reactはフォームレンダリング全体を引き継ぎます。だから私は現在Reactを通して自分のフォームを完全に再描画しようとしています。 forms.pyの代わりにserializers.pyを作成して、Reactに送られるデータを定義し、自分の環境でDjango Rest Frameworkの設定を行うようにしました。今私はこのデータをどのように送信するかを考えようとしています。 Django/DRFとReactを統合することについて話しているが、ReactとDRFによるエンドツーエンドのフォームレンダリングの一例が見つかりませんでした。具体的には、誰でも私が私の視点で本当に何を書いているのかを教えてください。そうすればReactのGETリクエストでフォームデータを取得しようとすると便利でしょうか？ Web参照や、必要な広範なステップだけで、私が始めて（そしてドキュメントの詳細を掘り下げて）十分であるはずです。

更新： 。また、ここでserializers.pyコードの簡易版を追加：

from .models import Entity 
from rest_framework import serializers 


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

Answer 1

まず、私はあなたが複数の入力を持つフォームについてrelated React documentationをチェックする必要があると思います。それは、あなたがリアクション側で物事をどのように構成すべきかについての基本的な考え方を与えます。

サーバーからデータをフェッチについて、あなたは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()), 
]