从父组件中访问子组件引用

Question

I'm creating a simple React app that loads movie data from the OMDb API based on a search -- so far, so good.

However, I refactored the app and added the data fetching logic in a parent container component . Now I'm having trouble accessing the search field's value via refs from within the container component .

My component hierarchy looks like this (each component in its own file):

example

The state and props 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:

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

Then, further nested, I have a <SearchForm /> component with the following 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>      
    );
  }
}

The big question is: How can I access the ref (or value) of the input inside <SearchForm /> , from within <MovieSearchContainer /> , so that I can pass that value into the API call?

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

Should I place this logic elsewhere?

I've tried methods like ReactDOM.findDOMNode(this.refs.query).value and a few others, but no luck.

Please let me know if you need me to provide more code. :)

Answer 1

UPDATE: I was passing the same ref value to each child component, including the input I was trying to target. For example:

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

I was calling this.refs.query.value in the container component , which only targets the outermost element of the rendered child component.

So instead, I passed a different ref value for each component, including the input node:

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

Then, in my _performSearch() method, I targeted the input value like this:

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

It works great, but seems a bit code smelly. Any cleaner suggestions? :)