부모 구성 요소 내에서 하위 구성 요소 참조에 액세스

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`) 
     ... 
} 

: 내 _performSearch() 방법,

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

그럼,이 같은 input 값을 대상으로

그것은 훌륭하게 작동하지만 비트 코드 냄새 나는 것 같습니다. 더 깨끗한 제안? :)