From 5de04c8da03cbd0dda7411636563044f4e0dc9e7 Mon Sep 17 00:00:00 2001 From: Matt Klepac Date: Sat, 12 Mar 2016 00:50:58 -0600 Subject: [PATCH 1/2] Working on tutorial --- public/index.html | 85 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 82 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index 21340e72..2d67c11e 100644 --- a/public/index.html +++ b/public/index.html @@ -13,10 +13,89 @@
- From 2ade1368e6ef330c3a950543f7da1936ba710612 Mon Sep 17 00:00:00 2001 From: Matt Klepac Date: Sat, 12 Mar 2016 01:13:21 -0600 Subject: [PATCH 2/2] Finished tutorial --- comments.json | 7 ++++++- public/index.html | 49 +++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 51 insertions(+), 5 deletions(-) diff --git a/comments.json b/comments.json index 7bef77ad..23c6665e 100644 --- a/comments.json +++ b/comments.json @@ -8,5 +8,10 @@ "id": 1420070400000, "author": "Paul O’Shannessy", "text": "React is *great*!" + }, + { + "id": 1457766764027, + "author": "Matt", + "text": "Hello, World!" } -] +] \ No newline at end of file diff --git a/public/index.html b/public/index.html index 2d67c11e..107313c7 100644 --- a/public/index.html +++ b/public/index.html @@ -28,6 +28,28 @@ }.bind(this) }); }, + handleCommentSubmit: function(comment) { + var comments = this.state.data; + // Optimistically set an id on the new comment. It will be replaced by an + // id generated by the server. In a production application you would likely + // not use Date.now() for this and would have a more robust system in place. + comment.id = Date.now(); + var newComments = comments.concat([comment]); + this.setState({data: newComments}); + $.ajax({ + url: this.props.url, + dataType: 'json', + type: 'POST', + data: comment, + success: function(data) { + this.setState({data: data}); + }.bind(this), + error: function(xhr, status, err) { + this.setState({data: comments}); + console.error(this.props.url, status, err.toString()); + }.bind(this) + }); + }, getInitialState: function() { return {data: []}; }, @@ -40,7 +62,7 @@

Comments

- +
); } @@ -64,11 +86,30 @@

Comments

}); var CommentForm = React.createClass({ + getInitialState: function() { + return {author: '', text: ''}; + }, + handleAuthorChange: function(e) { + this.setState({author: e.target.value}); + }, + handleTextChange: function(e) { + this.setState({text: e.target.value}); + }, + handleSubmit: function(e) { + e.preventDefault(); + var author = this.state.author.trim(); + var text = this.state.text.trim(); + if (!text || !author) { + return; + } + this.props.onCommentSubmit({author: author, text: text}); + this.setState({author: '', text: ''}); + }, render: function() { return ( -
- - + + +
);