Clear input text after click event

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} />