Question

我正在创建一个简单的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>      
    );
  }
}

最大的问题是：如何从ref内访问input内<SearchForm />的{{1}}（或值），以便我可以通过值进入API调用？

<MovieSearchContainer />

我应该把这个逻辑放在别处吗？

我尝试了// 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 }); }) }和其他一些方法，但没有运气。

如果您需要我提供更多代码，请与我们联系。：）

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

它运行良好，但似乎有点代码臭。任何清洁建议？：）

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

1 个答案: