Using an input field with onBlur and a value from state blocks input in Reactjs JSX?

Question

I\'ve made a small fiddle to show the problem: http://jsfiddle.net/4TpnG/582/ When you have an input box with onBlur attached to it, and an initial value from state, input f

Answer 1

The value attribute ties the value of the input to that state, and if the user changes the value then the state and the input value is no longer tied to each other. So React stops that from happening.

You probably want to use the defaultValue attribute instead.

If you want to use the value attribute you need the onChange to sync it with the component state. This because the component can re-render at any time, and if the value is out of sync with the state that would render an old value.