title: How get data from material-ui TextField, DropDownMenu components?
body: <p>I create form, I have several TextField, DropDownMenu material-ui components included, question is how I can collect all data from all TextFields, DropDownMenus in one obj and sent it on server. For TextField it has TextField.getValue() Returns the value of the input. But I can`t understand how to use it. </p>
  
  <pre><code>var React = require('react'),
      mui = require('material-ui'),
      Paper = mui.Paper,
      Toolbar = mui.Toolbar,
      ToolbarGroup = mui.ToolbarGroup,
      DropDownMenu = mui.DropDownMenu,
      TextField = mui.TextField,
      FlatButton = mui.FlatButton,
      Snackbar = mui.Snackbar;
  
  var menuItemsIwant = [
    { payload: '1', text: '[Select a finacial purpose]' },
    { payload: '2', text: 'Every Night' },
    { payload: '3', text: 'Weeknights' },
    { payload: '4', text: 'Weekends' },
    { payload: '5', text: 'Weekly' }
  ];
  var menuItemsIcan = [
    { payload: '1', text: '[Select an objective]' },
    { payload: '2', text: 'Every Night' },
    { payload: '3', text: 'Weeknights' },
    { payload: '4', text: 'Weekends' },
    { payload: '5', text: 'Weekly' }
  ];
  var menuItemsHousing = [
    { payload: '1', text: '[Select housing]' },
    { payload: '2', text: 'Every Night' },
    { payload: '3', text: 'Weeknights' },
    { payload: '4', text: 'Weekends' },
    { payload: '5', text: 'Weekly' }
  ];
  var menuItemsIlive = [
    { payload: '1', text: '[Select family mambers]' },
    { payload: '2', text: 'Every Night' },
    { payload: '3', text: 'Weeknights' },
    { payload: '4', text: 'Weekends' },
    { payload: '5', text: 'Weekly' }
  ];
  var menuItemsLifestyle = [
    { payload: '1', text: '[Select lifestyle]' },
    { payload: '2', text: 'Every Night' },
    { payload: '3', text: 'Weeknights' },
    { payload: '4', text: 'Weekends' },
    { payload: '5', text: 'Weekly' }
  ];
  var menuItemsLifestyle2 = [
    { payload: '1', text: '[Select savings]' },
    { payload: '2', text: 'Every Night' },
    { payload: '3', text: 'Weeknights' },
    { payload: '4', text: 'Weekends' },
    { payload: '5', text: 'Weekly' }
  ];
  var menuItemsIncome = [
    { payload: '1', text: '[Select your yearly income]' },
    { payload: '2', text: 'Every Night' },
    { payload: '3', text: 'Weeknights' },
    { payload: '4', text: 'Weekends' },
    { payload: '5', text: 'Weekly' }
  ];
  var Content = React.createClass({
  
    getInitialState: function() {
      return {
        //formData: {
        //  name: '',
        //  age: '',
        //  city: '',
        //  state: ''
        //},
        errorTextName: '',
        errorTextAge: '',
        errorTextCity: '',
        errorTextState: ''
      };
    },
  
    render: function() {
  
      return (
        &lt;div className="container-fluid"&gt;
          &lt;div className="row color-bg"&gt;&lt;/div&gt;
          &lt;div className="row main-bg"&gt;
            &lt;div className="container"&gt;
              &lt;div className="mui-app-content-canvas page-with-nav"&gt;
                &lt;div className="page-with-nav-content"&gt;
  
                  &lt;Paper zDepth={1}&gt;
  
                    &lt;h2 className="title-h2"&gt;Now, what would you like to do?&lt;/h2&gt;
  
                    &lt;Toolbar&gt;
                      &lt;ToolbarGroup key={1} float="right"&gt;
                        &lt;span&gt;I want to&lt;/span&gt;
                        &lt;DropDownMenu
                          className="dropdown-long"
                          menuItems={menuItemsIwant}
                          //autoWidth={false}
                        /&gt;
                      &lt;/ToolbarGroup&gt;
                    &lt;/Toolbar&gt;
  
                    &lt;div className="clearfix"&gt;&lt;/div&gt;
  
                    &lt;Toolbar&gt;
                      &lt;ToolbarGroup key={2} float="right"&gt;
                        &lt;span&gt;So I can&lt;/span&gt;
                        &lt;DropDownMenu
                          className="dropdown-long"
                          menuItems={menuItemsIcan}
                          //autoWidth={false}
                        /&gt;
                      &lt;/ToolbarGroup&gt;
                    &lt;/Toolbar&gt;
  
                    &lt;h2 className="title-h2"&gt;Please, share a little about you.&lt;/h2&gt;
  
                    &lt;div className="clearfix"&gt;&lt;/div&gt;
  
                    &lt;Toolbar&gt;
                      &lt;ToolbarGroup key={3} float="right"&gt;
                        &lt;span&gt;I am&lt;/span&gt;
                        &lt;TextField
                          id="name"
                          className="text-field-long"
                          ref="textfield"
                          hintText="Full name"
                          errorText={this.state.errorTextName}
                          onChange={this._handleErrorInputChange}
                        /&gt;
                        &lt;span&gt;and I am&lt;/span&gt;
                        &lt;TextField
                          id="age"
                          className="text-field-short"
                          ref="textfield"
                          hintText="00"
                          errorText={this.state.errorTextAge}
                          onChange={this._handleErrorInputChange}
                        /&gt;
                        &lt;span className="span-right-measure"&gt;years of age.&lt;/span&gt;
                      &lt;/ToolbarGroup&gt;
                    &lt;/Toolbar&gt;
  
                    &lt;div className="clearfix"&gt;&lt;/div&gt;
  
                    &lt;Toolbar&gt;
                      &lt;ToolbarGroup key={4} float="right"&gt;
                        &lt;span&gt;I&lt;/span&gt;
                        &lt;DropDownMenu
                          hintText="I"
                          menuItems={menuItemsHousing}
                          //autoWidth={false}
                        /&gt;
                        &lt;span&gt;in&lt;/span&gt;
                        &lt;TextField
                          id="city"
                          ref="textfield"
                          className="text-field-long"
                          hintText="City"
                          errorText={this.state.errorTextCity}
                          onChange={this._handleErrorInputChange}
                        /&gt;
                        &lt;span&gt;,&lt;/span&gt;
                        &lt;TextField
                          id="state"
                          ref="textfield"
                          className="text-field-short text-field-right-measure"
                          hintText="ST"
                          errorText={this.state.errorTextState}
                          onChange={this._handleErrorInputChange}
                        /&gt;
                      &lt;/ToolbarGroup&gt;
                    &lt;/Toolbar&gt;
  
                    &lt;div className="clearfix"&gt;&lt;/div&gt;
  
                    &lt;Toolbar&gt;
                      &lt;ToolbarGroup key={5} float="right"&gt;
                        &lt;span&gt;Where I live&lt;/span&gt;
                        &lt;DropDownMenu
                          className="dropdown-long"
                          menuItems={menuItemsIlive}
                          //autoWidth={false}
                        /&gt;
                      &lt;/ToolbarGroup&gt;
                    &lt;/Toolbar&gt;
  
                    &lt;div className="clearfix"&gt;&lt;/div&gt;
  
                    &lt;Toolbar&gt;
                      &lt;ToolbarGroup key={6} float="right"&gt;
                        &lt;span&gt;My lifestyle is&lt;/span&gt;
                        &lt;DropDownMenu
                          className="dropdown-short"
                          menuItems={menuItemsLifestyle}
                          //autoWidth={false}
                        /&gt;
                        &lt;span&gt;and I've saved&lt;/span&gt;
                        &lt;DropDownMenu
                          className="dropdown-short"
                          menuItems={menuItemsLifestyle2}
                          //autoWidth={false}
                        /&gt;
                      &lt;/ToolbarGroup&gt;
                    &lt;/Toolbar&gt;
  
                    &lt;div className="clearfix"&gt;&lt;/div&gt;
  
                    &lt;Toolbar&gt;
                      &lt;ToolbarGroup key={7} float="right"&gt;
                        &lt;span&gt;My yearly household is about&lt;/span&gt;
                        &lt;DropDownMenu
                          className="dropdown-mobile"
                          menuItems={menuItemsIncome}
                          //autoWidth={false}
                        /&gt;
                      &lt;/ToolbarGroup&gt;
                    &lt;/Toolbar&gt;
  
                    &lt;div className="clearfix"&gt;&lt;/div&gt;
  
                    &lt;div className="button-place"&gt;
                      &lt;FlatButton
                        onTouchTap={this._handleClick}
                        label="I'm done lets go!"
                      /&gt;
  
                      &lt;Snackbar
                        ref="snackbar"
                        message="Invalid input, please check and try again"
                      /&gt;
                    &lt;/div&gt;
  
                  &lt;/Paper&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    },
  
    _handleErrorInputChange: function(e) {
      if (e.target.id === 'name') {
        var name = e.target.value;
        this.setState({
          //name: name,
          errorTextName: e.target.value ? '' : 'Please, type your Name'
        });
      } else if (e.target.id === 'age') {
        var age = e.target.value;
        this.setState({
          //age: age,
          errorTextAge: e.target.value ? '' : 'Check Age'
        });
      } else if (e.target.id === 'city') {
        var city = e.target.value;
        this.setState({
          //city: city,
          errorTextCity: e.target.value ? '' : 'Type City'
        });
      } else if (e.target.id === 'state') {
        var state = e.target.value;
        this.setState({
          //state: state,
          errorTextState: e.target.value ? '' : 'Type State'
        });
      }
    },
  
    _handleClick: function(e) {
      this.refs.snackbar.show();
      //TODO: find a way to change errorText for all empty TextField
      if (this.refs.textfield &amp;&amp; this.refs.textfield.getValue().length === 0) {
        this.setState({
          errorTextState: 'Type State',
          errorTextCity: 'Type City',
          errorTextAge: 'Check Age',
          errorTextName: 'Please, type your Name'
        });
      }
    }
  
  });
  
  module.exports = Content;
  </code></pre>
  
  <p>I want sent it on server in _handleClick method.</p>