It is preferred to treat the ref as a callback attribute and no longer depend on the refs Object. If you do use the refs Object, avoid accessing refs of descendant components. You should treat refs as a private accessor and not part of a component's API. Treat only the methods exposed on a component instance as its public API.

For this case, I suggest grabbing the form from the submit event and traversing its child form elements as needed. Add name attributes since that's how form elements are identified in standard form submissions, and then you shouldn't need refs at all:

var ActivityForm = React.createClass({

  handleSubmit: function(e) {

    e.preventDefault();

    var form = e.target;



    // Use the standard [`HTMLFormElement.elements`][1] collection

    //

    // [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements

    var content = form.elements['content'].value;



    // do more things with other named form elements

  },

  render: function() {

    return (

      <div className=new-activity>

        <h3>New Activity</h3>

        <form onSubmit={this.handleSubmit}>

          <textarea name='content' />

          <br />



          <label>Category</label>

          <ActivityFormCategoryDropdown />

          <br />



          <input type=submit value=Add Activity />

        </form>

      </div>

    );

  }

});

Update 2016-09-21: Revise suggestion to avoid the refs Object all together per guidance from the ref String Attribute docs.