Clear input text after click event
<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>