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

【问题标题】：Accessing child component refs from within a parent component从父组件中访问子组件引用
【发布时间】：2016-07-03 16:07:39
【问题描述】：

我正在创建一个简单的 React 应用程序，它根据搜索从 OMDb API 加载电影数据——到目前为止，一切都很好。

但是，我重构了应用程序并在父容器组件中添加了数据获取逻辑。现在我无法通过 容器组件 中的refs 访问搜索字段的值。

我的组件层次结构如下所示（每个组件都在自己的文件中）：

example

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

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

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 /> 内部访问input 内部的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 和其他一些方法，但没有成功。

如果您需要我提供更多代码，请告诉我。 :)

【问题讨论】：

React: Send ref back to container component?的可能重复
您的所有组件似乎都有onSearch 属性，您正在从上到下传递。 SearchForm 将值向上传递到组件树。您只需将相应的参数添加到_performSearch(query)。
谢谢！但看起来它仍然以undefined 的形式返回。
让父级添加引用，然后通过父级中的this.refs 访问它。你在哪里通过<SearchForm ref='query' />然后使用this.refs.query访问
那不是指向组件实例而不仅仅是 DOM 节点吗？

标签： javascript reactjs

【解决方案1】：

更新：我将相同的ref 值传递给每个子组件，包括我试图定位的input。例如：

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

我在容器组件中调用this.refs.query.value，它只针对渲染子组件的最外层元素。

因此，我为每个组件传递了不同的 ref 值，包括 input 节点：

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

然后，在我的_performSearch() 方法中，我将input 值作为目标：

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

它工作得很好，但似乎代码有点臭。有什么更清洁的建议吗？ :)

【讨论】：