Input field doesn't receive keyboard events when rendering with value property?

Question

I am using react-rails gem to work with ReactJS for Rails. The weird thing is if I set a non-empty value property when rendering React component, the input field won't receive any keyboard event

This doesn't work!

React.DOM.input
  type: 'text'
  className: 'form-control'
  value: "ABC"

But it works

React.DOM.input
  type: 'text'
  className: 'form-control'
  value: ""

Any idea guys? Thanks a lot!

Answer 1

I have answered to one question similar to this, i don't know how to share that answer to you. So i am re-typing that.

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.