title: reactjs get select values - always undefined
body: <p>I'm quite new to reactjs, so I wrote a fairly simple page to test a 'dynamic' <code>&lt;select&gt;</code> options and how to get the selected value. What I wanted to do was on submit, be able to get the selected values by iterating through the <code>this.refs</code> but I'm getting undefined values. I'm not sure how to make it work in a controlled manner using the handle change so I opted to go the uncontrolled approach. However I'd like to know how to do it both ways. Or is there a neater/preferred way to get the selected values on form submit?</p>
  
  <p>Also in the rendering of the select, why can't I add a <code>ref={this.props.formId}</code> there instead of on the OptionsList? If i remove the ref on OptionsList and have it in the select then it doesn't recognise any select inputs.</p>
  
  <pre><code>var data1 = [
    { Id: 1, Name: "Option 1", Value: "Value 1" },
    { Id: 2, Name: "Option 2", Value: "Value 2" },
    { Id: 3, Name: "Option 3", Value: "Value 3" }
  ];
  
  var data2 = [
    { Id: 4, Name: "Option 4", Value: "Value 4" },
    { Id: 5, Name: "Option 5", Value: "Value 5" },
    { Id: 6, Name: "Option 6", Value: "Value 6" }
  ];
  
  var FormOptionList = React.createClass({
      handleSubmit: function (e) {
          e.preventDefault();
  
          for (var ref in this.refs) {
              console.log(this.refs[ref].value);
          }
  
          return;
      },
      render: function () {
          return (
            &lt;div className="formList"&gt;
                &lt;form onSubmit={this.handleSubmit}&gt;
                    &lt;div&gt;
                      &lt;OptionsList key="ListA" formId="ListA" options={this.props.data1} ref="ListA" /&gt;
                      &lt;br /&gt;
                      &lt;OptionsList key="ListB" formId="ListB" options={this.props.data2} ref="ListB" /&gt;
                    &lt;/div&gt;
                    &lt;input type="submit" value="Post" /&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        );
      }
  });
  
  var OptionsList = React.createClass({
      //getInitialState: function () {
      //    return {
      //        options: [],
      //        selectValue: 'Option 1'
      //    };
      //},
      //handleChange: function(e) {
      //    this.setState({ selectValue: e.target.value })
      //},
      getInitialState: function () {
          return {
              options: []
          };
      },
      render: function () {
          var optionsList = this.props.options.map(function (option) {
              return (
                  &lt;option key={option.Id} value={option.Value}&gt;{option.Name}&lt;/option&gt;
              )
          });
          return (
              &lt;select&gt;
                  {optionsList}
              &lt;/select&gt;
          );
      }
  });
  
  ReactDOM.render(
    &lt;FormOptionList data1={data1} data2={data2} /&gt;,
    document.getElementById('content')
  );
  </code></pre>