CreatePage.js

var React= require('react/addons');
var Router = require('react-router');
var AppConstants = require('../../constants/AppConstants');
var GroupActionCreators = require('../../actions/GroupActionCreators');

var Link = Router.Link;

module.exports = React.createClass({
	mixins: [Router.Navigation],

	getInitialState: function() {
		return {
			value: this.props.value || ""
		}
	},

	onChange: function(evt) {
		this.setState({
			value: evt.target.value
		});
	},

	onKeyUp: function(evt) {
		if (evt.keyCode == AppConstants.ENTER_KEY_CODE) {
			this.save();
		}
	},

	save: function()
	{
		var Group = {
			name: this.state.value,
			contacts: []
		};

		GroupActionCreators.createGroup(Group);

		this.transitionTo("group_list");
	},

	render: function() {

		var from = "group_list";

		var value = this.state.value;

		return (
			<div className="page-container">
				<div className="header bar bar-nav">
					<Link to={ from } className="icon icon-left-nav pull-left" />
					<h1 className="title">New Group</h1>
				</div>

				<div className="content">
					<input	type="text"
							ref="group_name"
							placeholder="Group name"
							onChange={ this.onChange }
							onKeyUp={ this.onKeyUp }
							autoFocus={ true }
							value={ value }
					/>

					<button	className="btn btn-block btn-positive"
							onClick={ this.save }
					>Create Group</button>

				</div>
			</div>
		);
	}
});