Hi,
I am getting crazy finding out how to submit data to the django-rest-api via react.js to include a valid CSRF token by using SessionAuthentication.
My template is very basic:
{% extends "base.html" %}
{% load staticfiles %}
{% block title %} ToDo List {% endblock %}
{% block content %}
<script src="" static 'js/todos.js' %}"></script>
{% endblock %}
The corresponding JSX File (which I then transform via jsx –x jsx . . to a valid .js file) contains the following:
var ToDoForm = React.createClass({
getInitialState: function() {
return {
"todo_source": "",
"todo_description": "",
"todo_due_date": '2015-12-21',
"todo_prio": "1"
};
},
handleSourceChange: function(e) {
this.setState({todo_source: e.target.value});
},
handleDescriptionChange: function(e) {
this.setState({todo_description: e.target.value});
},
handleDateChange: function(e) {
this.setState({todo_due_date: e.target.value});
},
handlePrioChange: function(e) {
this.setState({todo_prio: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: this.props,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="ToDoForm" _onSubmit_={this.handleSubmit}>
<form>
<div className="form-group">
<label for="" source</label>
<input type="text" className="form-control" id="input_todo_source" placeholder="Source of the ToDo" value={this.state.todo_source} _onChange_={this.handleSourceChange}></input>
</div>
<div className="form-group">
<label for="" description</label>
<input type="text" className="form-control" id="input_todo_description" placeholder="Description of the todo" value={this.state.todo_description} _onChange_={this.handleDescriptionChange}></input>
</div>
<div className="form-group">
<label for="" due date</label>
<input type="date" className="form-control" id="input_todo_due_date" placeholder="The due date of the todo" value={this.state.todo_due_date} _onChange_={this.handleDateChange}></input>
</div>
<div className="form-group">
<label for="" prio</label>
<input type="text" className="form-control" id="input_todo_prio" placeholder="1|2|3 (high|medium|low)" value={this.state.todo_prio} _onChange_={this.handlePrioChange}></input>
</div>
<button type="submit" className="btn btn-default">Submit</button>
</form>
</div>
);
}
});
ReactDOM.render(<TodoForm url="" document.getElementById('content'));
So can anybody please tell me how to include the csrf-token in react.js? https://docs.djangoproject.com/en/1.9/ref/csrf/ has not really helped me nor did I find any example to accomplish that via google.
My also data: this.props is wrong then? Since I have to include the token?
Is there a better way?
Thank you very much!
Best Regards
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/trinity-89d49cc4-75fa-4819-b907-b52935f8e3c7-1451219372016%403capp-gmx-bs17.
For more options, visit https://groups.google.com/d/optout.
