namefields.js

import React from 'react';
import ReactNative from 'react-native';

var AccountFields = React.createClass({
  render: function() {
    return (
      <div>
        <h2>Account Details</h2>
        <ul className="form-fields">
          <li>
            <label>"What's your first name ?"</label>
            <input type="text" ref="firstname" defaultValue={this.props.fieldValues.first} />
          </li>
          <li>
            <label>"What's you last name ?"</label>
            <input type="text" ref="lastname" defaultValue={this.props.fieldValues.last} />
          </li>
          <li className="form-footer">
            <button className="btn -primary pull-right" onClick={this.nextStep}>Save &amp; Continue</button>
          </li>
        </ul>
      </div>
    )
  },

  nextStep: function(e) {
    e.preventDefault()

    // Get values via this.refs
    var data = {
      first     : this.refs.first.getDOMNode().value,
      last : this.refs.last.getDOMNode().value,
    }

    this.props.saveValues(data)
    this.props.nextStep()
  }
})

module.exports = NameFields