React Form submit example

Hello React - forms - using controlled components in a form. author(s): Ryan Vice

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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"/>

CSS

button {
    margin-left: 5px;
}

input {
    margin: 5px;
}

form {
 padding-right: 10px;   
}
}

Babel + JSX

var ExampleForm = React.createClass({
    onChange: function(event) {
      if (event.target.value.length === event.target.maxLength) {
        this.refs[parseInt(event.target.id, 10) + 1].focus();
      }
    },
    render: function() {
       return (
            <form>
                <input className='form-control'
                  id="1"
                  maxLength="3"
                  name="firstName"
                  ref="1"
                  type='text' 
                  onChange={this.onChange}/>
                <input className='form-control'
                  id="2"
                  maxLength="3"
                  name="lastName"
                  ref="2"
                  type='text' 
                  onChange={this.onChange}/>
                <input className='form-control'
                  id="3"
                  maxLength="4"
                  name="lastName"
                  ref="3"
                  type='text' 
                  onChange={this.onChange}/>
                <button className='btn btn-success'
                  ref="4"
                	type='submit'>Submit</button>
            </form>
        );
    }
});

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