React: Building Modern Web Applications

Forms

Form components such as <input/>, <textarea/> and <option/> are handled differently by React as they allow for being mutated by the users input unlike static components like <div/> or <h1/>. As we will the dynamic nature of form components combined with the determination of React components can lead to some unexpected things when you are first learning React.

Controlled components - the read-only input

Let's start by exploring the concept of controlled components by looking at the following code:

var TextBox = React.createClass({
    render: function() {
        return <input type='text' value='Read only'/>;
    }
});

ReactDOM.render(
    <TextBox/>,
    document.getElementById('view'));

Note

Source code: http://j.mp/Mastering-React-3-3-Gist

Fiddle: http://j.mp/Mastering-React-3-3-Fiddle ...