comment_form.jsx 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import React from 'react';
  2. class CommentForm extends React.Component {
  3. getInitialState() {
  4. return { author: '', text: '' };
  5. }
  6. handleAuthorChange(e) {
  7. this.setState({ author: e.target.value });
  8. }
  9. handleTextChange(e) {
  10. this.setState({ text: e.target.value });
  11. }
  12. handleSubmit(e) {
  13. e.preventDefault();
  14. const author = this.state.author.trim();
  15. const text = this.state.text.trim();
  16. if (!text || !author) {
  17. return;
  18. }
  19. this.props.onCommentSubmit({ author, text });
  20. this.setState({ author: '', text: '' });
  21. }
  22. render() {
  23. return (
  24. <form className="commentForm" onSubmit={this.handleSubmit}>
  25. <input
  26. type="text"
  27. placeholder="Your name"
  28. value={this.state.author}
  29. onChange={this.handleAuthorChange}
  30. />
  31. <input
  32. type="text"
  33. placeholder="Say something..."
  34. value={this.state.text}
  35. onChange={this.handleTextChange}
  36. />
  37. <input type="submit" value="Post" />
  38. </form>
  39. );
  40. }
  41. }
  42. CommentForm.propTypes = {
  43. author: React.PropTypes.string,
  44. text: React.PropTypes.string,
  45. onCommentSubmit: React.PropTypes.func,
  46. };