начал мучать эту дичь, по тутору писал, все с формы добавляется норм, а файл добавить чет ваще понять не могу как
var BookBox = React.createClass({
loadBooksFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
handleBookSubmit: function (book) {
console.log(book);
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: book,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: {results: [], counts: 0, next: null, previous: null}};
},
componentDidMount: function() {
this.loadBooksFromServer();
setInterval(this.loadBooksFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="bookBox">
<h1>Отзывы о книгах</h1>
<BookList data={this.state.data}/>
<BookForm onBookSubmit={this.handleBookSubmit}/>
</div>
);
}
});
var BookList = React.createClass({
render: function() {
var bookNodes = this.props.data.results.map(function(book) {
return (
<Book title={book.title} key={book.id} img={book.img}>
</Book>
)
});
return (
<div className="bookList">
{bookNodes}
</div>
);
}
});
var BookForm = React.createClass({
getInitialState: function() {
return {title: '', slug: '', author: '', img: null, genre: '', year: null}
},
handleTitleChange: function(e) {
this.setState({title: e.target.value})
},
handleAuthorChange: function(e) {
this.setState({author: e.target.value})
},
handleImgChange: function(e) {
var self = this;
var reader = new FileReader();
var file = e.target.files[0];
reader.onload = function(upload) {
self.setState({
img: upload.target.result,
});
}
reader.readAsDataURL(file);
},
handleGenreChange: function(e) {
this.setState({genre: e.target.value})
},
handleYearChange: function(e) {
this.setState({year: e.target.value})
},
handleSubmit: function(e) {
e.preventDefault();
var title = this.state.title.trim();
var author = this.state.author.trim();
var img = this.state.img;
var genre = this.state.genre.trim();
var year = this.state.year.trim();
if (!title || !author || !genre || !year) {
return console.log("Заполните поля");
}
this.props.onBookSubmit({title: title, slug: slugify(title), author: author, img: img, genre: genre, year: year});
this.setState({title: '', slug: '', author: '', img: null, genre: '', year: null})
},
render: function() {
return (
<form className="bookForm form-horizontal form" onSubmit={this.handleSubmit} encType="multipart/form-data">
<div class="form-group">
<input type="text" class="form-control" id="title" placeholder="Название"
value={this.state.title} onChange={this.handleTitleChange} />
</div>
<div class="form-group">
<input type="text" class="form-control" id="author" placeholder="Автор"
value={this.state.author} onChange={this.handleAuthorChange} />
</div>
<div class="form-group">
<input type="file" id="img" onChange={this.handleImgChange} />
<p class="help-block">Изображение книги</p>
</div>
<div class="form-group">
<input type="text" class="form-control" id="genre" placeholder="Жанр"
value={this.state.genre} onChange={this.handleGenreChange} />
</div>
<div class="form-group">
<input type="number" class="form-control" id="year" maxlength="4" placeholder="Год написания"
value={this.state.year} onChange={this.handleYearChange} />
</div>
<input type="submit" class="btn btn-primary" value="Добавить" />
</form>
);
}
});
var Book = React.createClass({
render: function () {
return (
<div className="col-md-3">
<h2 className="bookTitle">
{this.props.title}
</h2>
<div>
<img src={this.props.img} alt={this.props.title} width="250px"/>
</div>
</div>
)
}
});
ReactDOM.render(
<BookBox url="/api_v1/books/" pollInterval={20000} />,
document.getElementById('content')
);
