Hello React - controlled components - how to use controlled components in forms. JsFiddle: http://jsfiddle.net/gh/gist/library/pure/044ecdf2f63b2bff57d7

fiddle.html

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
 
<div id="view"/>

fiddle.js

var HelloMessage = React.createClass({
    render: function() {
        return <h2>{this.props.message}</h2>;
    }
});

var Button = React.createClass({
   render: function() {
       return <button onClick={this.props.onClick}>{this.props.children}</button>
   }
});

var GlyphIcon = React.createClass({
   render: function() {
       return <span className={'glyphicon glyphicon-' + this.props.icon}></span>
   }
});

var TextBox = React.createClass({
    getInitialState: function() {
        return { isEditing: false, text: this.props.label }
    },
    update: function() {
        this.setState(
            {
                isEditing: false
            });
        this.props.update();
    },
    edit: function() {
        this.setState({ isEditing: true});
    },
    render: function() {
        return (
            <div>
              {this.props.label}<br/>
                <input name={this.props.name} type='text' value={this.props.value} disabled={!this.state.isEditing} 
                	onChange={this.props.onChange}/>
                {
                    this.state.isEditing ?
                        <Button onClick={this.update}><GlyphIcon icon='ok'/> Update</Button>
                        :
                        <Button onClick={this.edit}><GlyphIcon icon='pencil'/> Edit</Button>
                    }
            </div>
        );
    }
});

var HelloReact = React.createClass({
    getInitialState: function () {
        return { 
                form: {firstName: '', lastName: ''}, 
                message: 'Hello '
            };
    },
    onChange: function(event) {
    	var field = event.target.name;
        var value = event.target.value;
        
        this.state.form[field] = value;
        
        this.setState({form: this.state.form});
    },
    update: function () {
        this.setState({ message: 'Hello ' + this.state.form.firstName + ' ' + this.state.form.lastName });
    },
    render: function() {
        return (
            <div>
                <HelloMessage
                    message={this.state.message}>
                </HelloMessage>
                <TextBox label='First Name' name='firstName'
                    update={this.update} value={this.state.firstName} onChange={this.onChange}>
                </TextBox>
                <TextBox label='Last Name'  name='lastName'
                    update={this.update} value={this.state.firstName} onChange={this.onChange}>
                </TextBox>
            </div>
        );
    }
});

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

fiddle.manifest

name: ReactJs example by Ryan Vice - www.ViceSoftware.com
description: Hello React - controlled components - how to use controlled components in forms.
authors:
  - Ryan Vice
resources:
normalize_css: no
wrap: h
panel_js: 3
panel_css: 0