File tree Expand file tree Collapse file tree 1 file changed +34
-3
lines changed Expand file tree Collapse file tree 1 file changed +34
-3
lines changed Original file line number Diff line number Diff line change @@ -58,11 +58,42 @@ var CommentList = React.createClass({
58
58
} ) ;
59
59
60
60
var CommentForm = React . createClass ( {
61
+ getInitialState : function ( ) {
62
+ return { author : '' , text : '' } ;
63
+ } ,
64
+ handleAuthorChange : function ( e ) {
65
+ this . setState ( { author : e . target . value } ) ;
66
+ } ,
67
+ handleTextChange : function ( e ) {
68
+ this . setState ( { text : e . target . value } ) ;
69
+ } ,
70
+ handleSubmit : function ( e ) {
71
+ e . preventDefault ( ) ;
72
+ var author = this . state . author . trim ( ) ;
73
+ var text = this . state . text . trim ( ) ;
74
+ if ( ! text || ! author ) {
75
+ return ;
76
+ }
77
+ // TODO: send request to the server
78
+ this . setState ( { author : '' , text : '' } ) ;
79
+ } ,
61
80
render : function ( ) {
62
81
return (
63
- < div className = "commentForm" >
64
- Hello, world! I am a CommentForm.
65
- </ div >
82
+ < form className = "commentForm" onSubmit = { this . handleSubmit } >
83
+ < input
84
+ type = "text"
85
+ placeholder = "Your name"
86
+ value = { this . state . author }
87
+ onChange = { this . handleAuthorChange }
88
+ />
89
+ < input
90
+ type = "text"
91
+ placeholder = "Say something..."
92
+ value = { this . state . text }
93
+ onChange = { this . handleTextChange }
94
+ />
95
+ < input type = "submit" value = "Post" />
96
+ </ form >
66
97
) ;
67
98
}
68
99
} ) ;
You can’t perform that action at this time.
0 commit comments