title: Accessing child component refs from within a parent component
body: <p>I'm creating a simple React app that loads movie data from the OMDb API based on a search -- so far, so good.</p>
  
  <p>However, I refactored the app and added the data fetching logic in a parent <em>container component</em>. Now I'm having trouble accessing the search field's value via <code>refs</code> from within the <em>container component</em>. </p>
  
  <p>My component hierarchy looks like this (each component in its own file):</p>
  
  <p><a href="http://i.stack.imgur.com/13HaI.png" rel="nofollow">example</a></p>
  
  <p>The <code>state</code> and <code>props</code> seem to be fine and are being passed correctly. This is the JS for the main component -- I'm using axios to fetch data from the API:</p>
  
  <pre><code>class MovieSearchContainer extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        Search: [] 
      };
      this._performSearch = this._performSearch.bind(this);
    }
  
    _performSearch() {
      var _this = this;
  
      let query = I WANT TO ACCESS THE SEARCH FIELD VALUE HERE, maybe?;
  
      this.serverRequest = 
        axios
          .get(`http://www.omdbapi.com/?s=${query}&amp;r=json`)
          .then(function(result) {    
            _this.setState({
              Search: result.data.Search
            });
          }) 
  
      .catch((error) =&gt; {
        console.log('Error fetching and parsing data', error);
      });
    }
  
    render() {
      return(
        &lt;Application query={this.state.Search}
                     onSearch={this._performSearch} /&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;MovieSearchContainer /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>Then, further nested, I have a <code>&lt;SearchForm /&gt;</code> component with the following JS:</p>
  
  <pre><code>class SearchForm extends Component {
  
    constructor() {
      super();
      this.state={
        searchText: ''
      };
    }
  
    _onSearchChange(e) {
      const searchText = e.target.value;
      this.setState({ searchText: searchText });
    }
  
    _handleSubmit(e) {
      if (e) e.preventDefault();
      this.props.onSearch(this.state.Search);
    }
  
    render() {
      return (
        &lt;form className="search-form" onSubmit={this._handleSubmit.bind(this)} &gt;
          &lt;label className="is-hidden" for="search"&gt;...&lt;/label&gt;
          &lt;input type="search" 
                 onChange={this._onSearchChange.bind(this)}
                 name="search" 
                 ref="query"
                 placeholder="Search a Title..." /&gt;
          &lt;button type="submit" id="submit" className="search-button"&gt;...&lt;/button&gt;
        &lt;/form&gt;      
      );
    }
  }
  </code></pre>
  
  <p>The big question is: How can I access the <code>ref</code> (or value) of the <code>input</code> inside <code>&lt;SearchForm /&gt;</code>, from within <code>&lt;MovieSearchContainer /&gt;</code>, so that I can pass that value into the API call? </p>
  
  <pre><code> // MovieSearchContainer
  
    _performSearch() {
      var _this = this;
  
      let query = I WANT TO ACCESS THE SEARCH FIELD VALUE HERE, maybe?;
  
      this.serverRequest = 
        axios
          .get(`http://www.omdbapi.com/?s=${query}&amp;r=json`)
          .then(function(result) {    
            _this.setState({
              Search: result.data.Search
            });
          }) 
    }
  </code></pre>
  
  <p>Should I place this logic elsewhere?</p>
  
  <p>I've tried methods like <code>ReactDOM.findDOMNode(this.refs.query).value</code> and a few others, but no luck.</p>
  
  <p>Please let me know if you need me to provide more code. :)</p>