title: Clear input text after click event
body: <p>The issue I am having is after entering text for the first time, I then click Add and the input text box gets cleared. However when I start to enter text in again, the input text will not let me enter any text apart from the first letter. I'm not sure why it's doing this.</p>
  
  <pre><code>var FormTextBox = React.createClass({
      handleOnBlur: function (e) {
          this.props.onBlur(e.target.value);
      },
      render: function () {
          return (
              &lt;input value={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} /&gt;
          )
      }
  });
  
  var TestFormTextBox = React.createClass({
      getInitialState: function (e) {
          return {
              value: ''
          }
      },
      handleOnAdd: function (e) {
          this.setState({ value: '' });
      },
      handleTextInfo: function (value) {
          this.setState({ value: value });
      },
      render: function () {
          return (
                  &lt;div&gt;
                      &lt;table&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Details&lt;/td&gt;
                                  &lt;td&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;&lt;FormTextBox value={this.state.value} fid={1} onBlur={this.handleTextInfo} /&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;button onClick={this.handleOnAdd}&gt;Add&lt;/button&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
          )
      }
  });
  </code></pre>