Clear input text after click event - reactjs

Question

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.
var FormTextBox = React.createClass({
handleOnBlur: function (e) {
this.props.onBlur(e.target.value);
},
render: function () {
return (
<input value={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} />
)
}
});
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 (
<div>
<table>
<tbody>
<tr>
<td>Details</td>
<td></td>
</tr>
<tr>
<td><FormTextBox value={this.state.value} fid={1} onBlur={this.handleTextInfo} /></td>
<td><button onClick={this.handleOnAdd}>Add</button></td>
</tr>
</tbody>
</table>
</div>
)
}
});

Answer 1

I am surprised that this even works the first time. With controlled components in react (ones where you are setting the value like you are with your input). you need to update the value whenever the user changes the text (with the onChange() event).
I made a JS fiddle here with your original code and you can see you can't even update the value in the input. In order to get it to update you need to replace the onBlur event with an onChange event like this JS fiddle. Hope that helps!

Answer 2

As mentioned here (https://facebook.github.io/react/docs/forms.html#controlled-components),
A controlled has a value prop. Rendering a controlled will reflect the value of the value prop.
User input will have no effect on the rendered element because React has declared the value to be Hello!. To update the value in response to user input, you could use the onChange event
You need to either change onBlur to onChange, or use defaultValue instead of value. e.g.
<input defaultValue={this.props.value} key={this.props.fid} type="text" onBlur={this.handleOnBlur} />

Answer 3

You need to change the value of the state variable as soon as you are typing the input value because that is what you are providing the input if you don't change it then the input wont show the updated value. In order to do this you need to use the onChange event everywhere.
var FormTextBox = React.createClass({
handleOnChange: function (e) {
this.props.onChange(e.target.value);
},
render: function () {
return (
<input value={this.props.value} key={this.props.fid} type="text" onChange={this.handleOnChange} />
)
}
});
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 (
<div>
<table>
<tbody>
<tr>
<td>Details</td>
<td></td>
</tr>
<tr>
<td><FormTextBox value={this.state.value} fid={1} onChange={this.handleTextInfo} /></td>
<td><button onClick={this.handleOnAdd}>Add</button></td>
</tr>
</tbody>
</table>
</div>
)
}
});
ReactDOM.render(<TestFormTextBox />, document.getElementById('app'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
<div id="app"></div>