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="input_todo_source">ToDo 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="input_task_description">ToDo 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="input_task_due_date">ToDo 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="input_todo_prio">Todo 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="/todo/"/>, 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
No comments:
Post a Comment