Why does react make input[type="text"] fields readonly unless I supply onChange callback?

Question

Initially I had:

<input type="text"id="requested" name="requested" ref="requested"   />

which was readonly.

changing it to:

<input type="text" onChange={function() {}} id="requested" name="requested" ref="requested" />

made it accept input from keyboard. Why does this happen?

Answer 1

The example you list is not read-only. See this JSFiddle: http://jsfiddle.net/BinaryMuse/13sbw3dy/

If you add a value={whatever} property to the input, which makes it a controlled component, then it is read-only uness you add an onChange handler that updates the value of whatever. From the React docs:

Why Controlled Components?

Using form components such as <input> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:

<input type="text" name="title" value="Untitled" />

This renders an input initialized with the value, Untitled. When the user updates the input, the node's value property will change. However, node.getAttribute('value') will still return the value used at initialization time, Untitled.

Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:

render: function() {
  return <input type="text" name="title" value="Untitled" />;
}

Since this method describes the view at any point in time, the value of the text input should always be Untitled.

Answer 2

In react, the component render's only when the state changes. Whenever the state of the component changes, then the corresponding component render. That means we are updating virtual DOM with new value and attach it to the main DOM. That's how react works.

In the case of input text fields the value of the text fields changes only when the user enter some value. In this case we are not updating any state, we are adding new value to "value" property of the text field. So the react wont render anything and new value is not added to the DOM. Here we are violating react behavior. So the react wont allow us to edit the input text fields.

In order to the get the smooth flow of the react, it allow us to use on change call back function in-order to set the state. On changing the value of the text filed, state set's with the new value so the react render and the DOM updated with the new value.

Instead of using call back function, we can use valuelink property to add value to input text. like:

getInitialState: function(){
  return {
    value:'' //for empty text value
  }
}

For value link, we have to give state value instead of variable value. For complete understanding please refer: https://facebook.github.io/react/docs/two-way-binding-helpers.html

whenever we enter the text in text box, the state get updated and the value of the input text set to state value.