react_tutorial9.jsx

var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    ...
  },
  handleCommentSubmit: function(comment) {
    // this callback POSTs the comment to the server
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        // then it sets the state, but remember, setting the state
        // will automatically make this component render
        // which will also re-render the comment list
        // so the comment list will automatically refresh upon submission
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    ...
  },
  componentDidMount: function() {
    ...
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

var CommentForm = React.createClass({
  getInitialState: function() {
    ...
  },
  handleAuthorChange: function(e) {
    ...
  },
  handleTextChange: function(e) {
    ...
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var author = this.state.author.trim();
    var text = this.state.text.trim();
    if (!text || !author) {
      return;
    }
    // this onCommentSubmit is really the handleCommentSubmit from the CommentBox component
    this.props.onCommentSubmit({author: author, text: text});
    this.setState({author: '', text: ''});
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Your name"
          value={this.state.author}
          onChange={this.handleAuthorChange}
        />
        <input
          type="text"
          placeholder="Say something..."
          value={this.state.text}
          onChange={this.handleTextChange}
        />
        <input type="submit" value="Post" />
      </form>
    );
  }
});