親コンポーネント内から子コンポーネントの参照にアクセスする

Question

私は、検索に基づいてOMDb APIからムービーデータをロードする単純なReactアプリケーションを作成しています。

しかし、私はアプリをリファクタリングし、親のコンテナコンポーネントにデータフェッチロジックを追加しました。現在、検索フィールドの値にrefsでアクセスして、コンテナコンポーネント内からアクセスできません。

私のコンポーネント階層は（独自のファイル内の各コンポーネント）を次のようになります。

stateと props

example

は大丈夫であるように見えるし、正しく渡されています。これは、主成分のためのJSです - 私は、APIからデータをフェッチするaxiosを使用しています：

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>  
    ); 
    } 
} 

：

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')); 

をその後、さらにネストされた、私は次のJSと<SearchForm />コンポーネントを持っています

大きな質問は、<SearchForm />内のinputのref（または値）に、<MovieSearchContainer />からアクセスして、その値を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などの方法を試しましたが、運がありません。

もっとコードを提供する必要がある場合はお知らせください。 :)

Answer 1

更新：私はターゲットにしようとしていたinputを含め、同じ子コンポーネントに同じrefの値を渡していました。例えば：

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

Iのみレンダリングされた子コンポーネントの最も外側の要素をターゲットコンテナコンポーネント、でthis.refs.query.valueを呼び出すました。

はので、代わりに、私はinputノードを含む、コンポーネントごとに異なるref値を渡さ：

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

：

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

はその後、私の_performSearch()方法では、私はこのようなinput値をターゲットに

それは素晴らしい作品ですが、ちょっと臭いようです。どんなクリーナーの提案？ :)