Функция HandleChange не работает в reactjs .Все нулевые значения из начального состояния публикуются на django rest framework
//что-то здесь не работает, не знаю что. Я попробовал заменить e.target.id на e.target.name. Это тоже не помогло.
Image.js
import axios from 'axios';
class Image extends React.Component {
constructor(props){
super(props);
this.state = {
floor_no:null,
distance:null,
area:null,
no_of_rooms:null,
price:null,
images: null
};
this.handleChange=this.handleChange.bind(this);
this.handleImageChange=this.handleImageChange.bind(this);
}
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
};
handleImageChange = (e) => {
this.setState({
images:e.target.files[0]
})
};
handleSubmit = (e) => {
e.preventDefault();
console.log(this.state);
let form_data = new FormData();
form_data.append('floor_no',this.state.floor_no);
form_data.append('distance',this.state.distance);
form_data.append('area',this.state.area);
form_data.append('no_of_rooms',this.state.no_of_rooms);
form_data.append('price',this.state.price);
form_data.append('images',this.state.images,this.state.images);
let url = 'http://localhost:8000/';
axios.post(url, form_data, {
headers: {
'content-type': 'multipart/form-data'
}
})
.then(res => {
console.log(res.data);
})
.catch(err => console.log(err))
};
render() {
return (
<div className="App">
<form onSubmit={this.handleSubmit}>
<p>
<input type="number"
id='floor_no'
onChange={this.handleChange}
value={this.state.floor_no}
required/>
</p>
<p>
<input type="number"
id='distance'
value={this.state.distance}
onChange={this.handleChange} required/>
</p>
<p>
<input type="number"
name='area'
value={this.state.area}
onChange={this.handleChange} required/>
</p>
<p>
<input type="number"
id='no_of_rooms'
value={this.state.no_of_rooms}
onChange={this.handleChange} required/>
</p>
<p>
<input type="number"
id='price'
value={this.state.price}
onChange={this.handleChange} required/>
</p>
<p>
<input type="file"
id='images'
accept="image/png, image/jpeg" onChange={this.handleImageChange} required/>
</p>
<input type="submit"/>
</form>
</div>
);
}
}
export default Image;
models.py
from django.db import models
# Create your models here.
class RenterInfo(models.Model):
username= models.CharField(max_length=100)
password=models.CharField(max_length=50)
def __str__(self):
return self.username
def upload_to(instance, filename):
return 'images/{filename}'.format(filename=filename)
class RentDetails(models.Model):
property_type=models.CharField(max_length=10)
floor_no=models.IntegerField(null=True)
distance=models.IntegerField(null=True)
location=models.CharField(max_length=20)
images=models.ImageField(upload_to='post_images',null=True)
area=models.IntegerField(null=True)
no_of_rooms=models.IntegerField(null=True)
price=models.IntegerField(null=True)
property_choices=[
('hostel','HOST'),
('house','HOUSE') ,
('room','ROOM'),
('flat','FLAT') ]
property_type=models.CharField(
max_length=10,
choices=property_choices,
)
renterInfo=models.OneToOneField(RenterInfo, on_delete=models.CASCADE,null=True)
class RenteeInfo(models.Model):
username= models.CharField(max_length=100)
password=models.CharField(max_length=50)
def __str__(self):
return self.username
serializers.py
from rest_framework import serializers
from firstapp.models import RentDetails
class RentDetailsSerializer(serializers.ModelSerializer):
class Meta:
model = RentDetails
fields = ['floor_no','distance','area','no_of_rooms','price','images']
extra_kwargs = {'floor_no': {'required': False},
'distance': {'required': False},
'location': {'required': False},
'area': {'required': False},
'no_of_rooms': {'required': False},
'price': {'required': False}
}
views.py
from firstapp.models import RentDetails
from rest_framework.views import APIView
from rest_framework.parsers import MultiPartParser, FormParser
from rest_framework.response import Response
from .serializers import RentDetailsSerializer
from rest_framework import status
class PostView(APIView):
parser_classes = (MultiPartParser, FormParser)
def get(self, request, *args, **kwargs):
rentDetails = RentDetails.objects.all()
serializer = RentDetailsSerializer(rentDetails , many=True)
return Response(serializer.data)
def post(self, request, *args, **kwargs):
rentDetails_serializer = RentDetailsSerializer(data=request.data)
if rentDetails_serializer.is_valid():
rentDetails_serializer.save()
return Response(rentDetails_serializer.data, status=status.HTTP_201_CREATED)
else:
print('error', rentDetails_serializer.errors)
return Response(rentDetails_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
urls.py/backend
from django.contrib import admin
from django.urls import path,include
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('admin/', admin.site.urls),
path('app/',include('firstapp.urls')),
path('',include('firstapp.api.urls')),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urls.py/api
from django.urls import path,include
from firstapp.api import views
#from rest_framework import routers
urlpatterns = [
path('', views.PostView.as_view(), name= 'rentDetails_list'),
# path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]
settings.py
значения из формы react не обновляются до состояния из handleChange. Я не могу найти ничего, что может быть причиной этого. Пожалуйста, помогите.