访问子组件是指从父组件内部访问子组件

我正在创建一个简单的React应用程序，它基于搜索从OMDb API加载电影数据-到目前为止，一切顺利。

然而，我重构了应用程序，并在父容器组件中添加了数据获取逻辑。现在我有麻烦通过refs从容器组件访问搜索字段的值。

我的组件层次结构是这样的(每个组件在自己的文件中):

例子

state和props似乎很好，正在正确地通过。这是主组件的JS——我使用axios从API获取数据:

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}&r=json`)
        .then(function(result) {    
          _this.setState({
            Search: result.data.Search
          });
        }) 
    .catch((error) => {
      console.log('Error fetching and parsing data', error);
    });
  }
  render() {
    return(
      <Application query={this.state.Search}
                   onSearch={this._performSearch} />
    );
  }
}
ReactDOM.render(<MovieSearchContainer />, document.getElementById('app'));

然后，进一步嵌套，我有一个<SearchForm />组件与以下JS:

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 (
      <form className="search-form" onSubmit={this._handleSubmit.bind(this)} >
        <label className="is-hidden" for="search">...</label>
        <input type="search" 
               onChange={this._onSearchChange.bind(this)}
               name="search" 
               ref="query"
               placeholder="Search a Title..." />
        <button type="submit" id="submit" className="search-button">...</button>
      </form>      
    );
  }
}

最大的问题是:我如何从<MovieSearchContainer />内访问<SearchForm />内input的ref(或值)，以便我可以将该值传递给API调用?

 // 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}&r=json`)
        .then(function(result) {    
          _this.setState({
            Search: result.data.Search
          });
        }) 
  }

我应该把这个逻辑放在其他地方吗?

我试过ReactDOM.findDOMNode(this.refs.query).value和其他一些方法，但没有运气。

请让我知道，如果你需要我提供更多的代码。:)

// component hierarchy
<Application />
  <Header onSearch={this._performSearch} ref="query" />
    <SearchForm onSearch={this.props.onSearch} ref="query" />
      <input ... ref="query" />

<Header onSearch={this._performSearch} ref="header" />
  <SearchForm onSearch={this.props.onSearch} ref="searchform" />
    <input ... ref="query" />

_performSearch() {
  var query = this.refs.header.refs.searchform.refs.query.value;
  this.serverRequest = 
    axios
      .get(`http://www.omdbapi.com/?s=${query}&r=json`)
      ...
}