Я столкнулся с этой проблемой, когда пытался передать данные в форме на сервер Django. Прежде всего, предупреждающее сообщение (определенное в файле login
js) говорит, что и имя пользователя, и пароль - undefined
. Используемая среда React - это дизайн муравьев.
Here is the code:
login.js (comment markers are provided along the way)
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Form, Input, Button, Checkbox, Row, Col } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import jQuery from 'jquery';
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
let cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
let cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
class NormalLoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {username: '', password: ''}; // <-- initial states
this.handleUsernameChange = this.handleUsernameChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleUsernameChange(event) {
this.setState({username: event.target.username});
}
handlePasswordChange(event) {
this.setState({password: event.target.password});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.username); // <-- here are the alerts
alert('Password is: ' + this.state.password);
event.preventDefault();
let csrftoken = getCookie('csrftoken');
fetch('/account/login/', {
credentials: 'include',
method: 'POST',
headers: {
'Content-Type': 'application/json', 'X-CSRFToken': csrftoken,
},
body: {
"username": this.state.username,
"password": this.state.password
}
})
.then((response) => {console.log('message: ', response);})
.catch((error) => {console.error('Error:', error);});
}
render () {
return (
} placeholder = "Имя пользователя" /> } type = "password" placeholder = "Пароль" /> Запомнить меня Забыл пароль // <- отправка формы Войти </Button> Или зарегистрируйтесь сейчас! )}}; ReactDOM.render ( , document.getElementById ("root"));
views.py
class UserLoginView(View):
form_class = LoginForm
initial = {'key': 'value'}
template_name = 'accounts/auth/auth-login.html'
def get(self, request, *args, **kwargs):
form = self.form_class(initial=self.initial)
return render(request, self.template_name, {'form': form})
def post(self, request, *args, **kwargs):
form = self.form_class(request.POST)
print("posted")
if form.is_valid():
username = request.POST['username']
password = request.POST['password']
user = authenticate(request, username=username, password=password)
print("valid")
if user is not None:
login(request, user)
print("logged in")
return redirect('index')
forms.py
class UpdateFormBase(ModelForm):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
password = self.fields.get('password')
if password:
password.help_text = password.help_text.format('../password/')
user_permissions = self.fields.get('user_permissions')
if user_permissions:
user_permissions.queryset = user_permissions.queryset.select_related('content_type')
def clean_password(self):
return self.initial.get('password')
class Meta:
model = User
fields = '__all__'
class LoginForm(UpdateFormBase):
class Meta:
model = User
fields = ('first_name', 'password')
Итак, все сводится к проблема в том, что я не могу получить данные из полей формы, когда появились предупреждения (это означает, что отправка обработана), но я не могу понять причину этого.
Для python файла, просто предположите, что все используемые методы и переменные объявлены.
Помощь приветствуется.