为什么我的反应状态没有更新？

Question

这是代码。

var Child = React.createClass({
  render: function() {
    return (
      <div>
        <h4> {this.props.title} </h4>
      </div>
    );
  }
});

var Root = React.createClass({
    handleSubmit: function(e) {
       e.preventDefault();
       var title = React.findDOMNode(this.refs.title).value.trim();
       console.log(title)
       this.setState({title: title})
    },
    render: function() {
      return(
        <div>
            <Child title="Sample Fruit"/>
            <form className="commentForm" onSubmit={this.handleSubmit}>
                <input type="text" placeholder="New Title..." ref="title" />
                <input type="submit" value="Post" />
            </form>
        </div>
      );
    }
});

React.render(<Root />, document.body);

this.props.title的值未获得更新，并且正在重新呈现相同的旧标题值Sample Fruit。我错过了什么？

老实说，我认为这足以说明我面临的问题，但StackOverflow要求我添加更多文字。所以就这样了。